Highlight Image in CSS

**locbtran** · 04-06-2011, 03:21 PM

I have this:

Code:

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

My HTML:

HTML Code:

<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:

Code:

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...

Code:


<!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

Thread: Highlight Image in CSS

Thread Tools

Search Thread

Highlight Image in CSS

Bookmarks

Bookmarks

Posting Permissions