Highlight Image in CSS [Archive] - Dynamic Drive Forums

locbtran

04-06-2011, 03:21 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

coothead

04-06-2011, 03:42 PM

Hi there locbtran,

here is one possible solution for you to try...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>turn image grey on hover</title>

<style type="text/css">
#decor{
display:block;
width:357px;
height:211px;
text-decoration:none;
background-color:#ccc;
}
#decor img{
display:block;
width:347px;
height:201px;
padding:4px;
border:1px solid #ccc;
background-color:#fff;
}
#decor:hover img {
opacity:0;
filter:alpha(opacity=0);
}
</style>

</head>
<body>

<div>
<a id="decor" href="http://www.google.com"><img src="http://www.coothead.co.uk/images/girl.jpg" alt=""></a>
</div>

</body>
</html>

coothead