Highlight Image

[locbtran]

I have this:

img.decor{	text-decoration:none;	border:#CCCCCC thin solid;	padding: 4px;}

My HTML:

<a href="google.com"><img class="decor" src="images/birds.jpg" /></a>

when I hover over the image "decor" in my CSS, I would like the whole image to turn grey. I tried this:

img.decor a:hover{background-color:#CCCCCC;}

but it doesn't work. Any ideas?? I just start learning CSS. thanks

[jeffman]

That won't work. If you want the image to lighten and get translucent, explore opacity. If you literally want the space to turn gray, with no image visible at all, you might try adding this rule:img.decor:hover {visibility: hidden;}Keep the background rule for the a:hover in that case

[ShadowMage]

Just so you know, this:img.decor a:hover{...will look for an anchor tag (being hovered) that is a descendant of an image with classname 'decor'.An image can never have descendants, so this selector will never work. You might want to give the anchor a class name too. Then you can just do something like this:a.imgLink:hover {

[jeffman]

Good catch