Grow your CSS skills. Land your dream job.

Image Hover

  • # April 11, 2012 at 4:29 pm

    Hello,
    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!

    http://petrowest.squarespace.com/

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

    http://petrowest.squarespace.com/

    # April 20, 2012 at 1:16 pm

    box-shadow: 0 0 10px #000;

    http://jsfiddle.net/BKFp5/

    Just combine that with the hover strategies above.

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

    Also: http://css-tricks.com/snippets/css/css-box-shadow/

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

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