The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image Hover

  • # April 11, 2012 at 4:29 pm

    I am looking to add an image hover to my 4 images on my homepage. Just something simple so it can hopefully work in most browsers. Any help would be great. Thanks!

    # April 11, 2012 at 5:29 pm

    Hum, can you define “image hover”? What should happen if you hover over any of the 4 images exactly?

    # April 11, 2012 at 5:47 pm

    Sorry about that. When a user hovers over a image I would like for a fade,shadow,transparency or something along those lines to happen so the user can see the picture contains a link to another page.

    # April 11, 2012 at 7:43 pm

    try this:

    img a:hover{
    opacity: 0.8;

    or this:

    img a:hover{
    box-shadow: 0 1px 8px black;
    # April 11, 2012 at 9:20 pm

    Or if the images are not links:

    img:hover {
    opacity: 0.8; /* 1 = 100%, 0 = 0% */
    /* or the drop-shadow effect */
    box-shadow: 0 1px 8px black; /* goes x-axis, y-axis, blur, (stretch factor on x-axis, not used here), colour */
    # April 12, 2012 at 2:01 pm

    thanks @dfogge and @cyneWATCH. Ill try those and see how they turn out!

    # April 20, 2012 at 12:56 pm

    I was just wondering if anyone new of a technique to get a shadow to appear all the way around the outside an image when hovered.

    # April 20, 2012 at 1:16 pm

    box-shadow: 0 0 10px #000;

    Just combine that with the hover strategies above.

    You’re basically telling the shadow to not offset on either axis.


    # May 8, 2012 at 6:04 pm

    What should I do to combat older IE browsers? The users of the particular site I am beginning to work on will more than likely have outdated browsers (and I’m on one here at work too! arg! dang IE8!!) Thx.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed