Highlight Image in CSS

[hiyatran]

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

[teedoff]

One option would be to create a copy of the image but add a sepia or grey effect to it. Then save that image and link it to your hover style rule.

[hiyatran]

can you give me an example of how I can go about doing this

thanks

[Excavator]

Hello hiyatran,
It's called a CSS rollover. Have a look at a css rollover demo here.

That demo uses 3 images combined for a link, a hover and a visited state.
It looks like you need the link/visited as one state and the hover/active as another so only 2 images would be needed to do what you want. The technique is the same.