Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Hover images

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #171488
    masterr
    Participant

    Hello,

    I want to make a page that have smaller version of images and a big version of the image when someone hovers over it. e.g. when I hover over image number 1, the image on the right must change to a bigger image of it. Check the attached image for more explanation.

    http://i59.tinypic.com/121g29e.jpg

    #171500
    Paulie_D
    Member

    So….what have you tried so far?

    There are many,many ways to do this depending on whether you are using a CMS, like WorPress or using PHP or manually writing the page yourself.

    There’s a tips box—->

    Perhaps you could try checking out some of the links….or just google “thumbnail gallery”.

    #171501
    masterr
    Participant

    This is the only code that works partially. it only works on one image because when I try to add more than one, it doesn’t work.

    #a,#b{
        float: left;
        border: 1px solid #000;
        padding: 0.2em;
    }
    
    img.second {
        display: none;
    }
    
    #a:hover + #b img.first {
        display: none;
    }
    #a:hover + #b img.second {
        display: inline-block;
    }​
    
    <div id="a">
        <img alt="img" src="images/img2.1.jpg" />
    </div>
    
    <div id="b">
        <img class="first" alt="img" src="images/img1.jpg" />
        <img alt="img" class="second" src="images/img2.jpg" />    
    </div>​​​​​​​​​​​​​​​​​
    #171514
    masterr
    Participant

    Thanks.. that helped a lot, but I can’t figure out how to change the position of the images.

    #171515
    Atelierbram
    Participant

    Maybe this is the right moment to make this ‘reduced test case’ in a Codepen. Forking the example above, editing to match your ideas, and posting the link to that Codepen link here, will help.

    #171516
    masterr
    Participant

    Thanks to everyone who tried to help. I managed to come up with another idea that worked.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.