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 http://trufcreative.com/truf_number_cat … -identity/ however when I view this page using Firebug, I can’t seem to find the image swap rule just positioning rules…

    Code:
    #thumbnails li {
    height:105px;
    margin-top:20px;
    overflow:hidden;
    position:relative;
    width:220px;
    }

    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!

    Code:
    • 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):

    Code:
    #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.

*May or may not contain any actual "CSS" or "Tricks".