Treehouse: Grow your CSS skills. Land your dream job.

[Solved] CSS image mouseover gallery

  • # June 13, 2010 at 1:24 am

    I’ve been looking at several different pages regarding using CSS to change an image on mouseover. I have a gallery very similar to the one found here … -identity/ however when I view this page using Firebug, I can’t seem to find the image swap rule just positioning rules…

    #thumbnails li {

    I know it uses that method to where its a single stitched together image [X|Y], the rules telling it to move left half-way on mouseover, thus exposing 1 image while hiding the 2nd half and then visa versa on out.

    I also tried to at least implement the XHTML, but since its a list I automatically get that single dot beside my image!

    • TRÜF
    # June 13, 2010 at 8:00 am

    You are correct in that they’re using a single image and simply moving it left and right with the overflow hidden out of site. The hover rule is on line 422 (found with Firebug):

    #thumbnails a:hover img {
    overflow: hidden;
    position: relative;
    right: 220px;

    and on line 237 the list style is set to none, eliminating the default bullets on the li

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.