Image Hover

[goalieman34]

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/

[Senff]

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

[goalieman34]

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.

[dfogge]

try this:

img a:hover{

opacity: 0.8;

}

or this:

img a:hover{

box-shadow: 0 1px 8px black;

}

[Billy]

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 */

}

[goalieman34]

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

[goalieman34]

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/

[cpyle0819]

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: https://css-tricks.com/snippets/css/css-box-shadow/

[luketheduke]

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.

[Author]

Posts