Forums

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;
}

cyneWATCH

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: http://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.

treehouse : what would you like to learn today?

Forums

Image Hover