...

View Full Version : Highlight Image in CSS



hiyatran
04-06-2011, 04:09 PM
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
04-06-2011, 04:34 PM
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
04-09-2011, 12:20 AM
can you give me an example of how I can go about doing this

thanks

Excavator
04-09-2011, 12:46 AM
Hello hiyatran,
It's called a CSS rollover. Have a look at a css rollover demo here (http://nopeople.com/CSS%20tips/CSS_rollover/index.html).

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum