Highlight Image in CSS

HTML & CSS
1

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

2

You can’t turn the img a dif color. Do like this { visibility: inherit; } The Linked Image Swap!

3

As Eric pointed out , you cant alter the image itself with CSS ( anyway IMG is content, an should be used only in that context). Also your CSS is not targeting ANYTHING:
img.decor a:hover needs to be a:hover img.decor to target the image in your source code.

For what I get you are trying to achieve, I would do this tho:

HTML

<a href="google.com" class="decor" ><img src="http://www.sitepoint.com/forums/images/birds.jpg" /></a>

CSS


.decor{	
        text-decoration:none;
	border:#CCC thin solid;
	padding: 4px;}
.decor:hover { background:#CCC;}
.decor:hover img{ visibility:hidden;}

When you hover over the image you now should have a gray rectangle the size of the image, as desired. IF I misunderstood and what you wanted was a grayscale version of the image, you will need to create a second version of your image in grayscale and do this:


.decor{	
        text-decoration:none;
	border:#CCC thin solid;
	padding: 4px;}
.decor:hover { background:url(images/birds_gray.jpg)  no-repeat center center;}
.decor:hover img{ visibility:hidden;}

PS
I dunno why site point is add it URL to the image code above…:confused: ignore that part, of course

4

Greying out the image can be done, but you have to position another element OVER the img to do it – like say, a dummy span off your anchor – which is why I’d move the class to the anchor. (assuming it even needs a class – though that depends on the parent container).


<a href="google.com" class="decor">
	<img src="http://www.sitepoint.com/forums/images/birds.jpg" alt="some Birds" />
	<span></span>
</a>

Something like that for markup, then:


.decor {
	position:relative;
	overflow:hidden; /* chop off span when not visible */
	zoom:1; /* trip haslayout, make IE play nice */
}

.decor img {
	display:block; /* remove any oddball paddings/margins from IMG */
}

.decor span {
	position:absolute;
	display:inline; /* IE state change hover fix */
	bottom:0;
	right:999em;
	width:320px; /* img width */
	height:200px; /* img height */
	background:#FFF;
	opacity:0.35;
	-moz-opacity:0.35;
	filter:alpha(opacity=35);
}

/*
	don't forget active and focus so keyboard users
	aren't left out in the cold!
*/

.decor:active span,
.decor:focus span,
.decor:hover span {
	display:block; /* IE state change hover fix */
	right:0;
}

Untested mind you, but should work. I’ll toss together a working demo of that if I have time.

Basically it just moves the transparent span over the image when you hover the anchor. Making the span monstrous and then bottom-right positioning it makes sure it won’t induce scrollbars without having to worry about stating the actual images size in the CSS.

Actually – duh, just change the opacity on the image so the background shows through on hover.

5

Image Gallery Hover Demo

Something like that? Mind you, it’s “fading” into the background, so care needs to be taken, but it’s pretty effective.

The directory:
Index of /for_others/hiyatran

is open for easy access to the CSS. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the use of filter (or the page itself using expressions), tested working IE 5.5, 6, 7, 8 and 9, FF 3.5 and 4, and the latest flavors each of Opera, Saffy and Chrome.

Hope this helps. Turned out really simple, rather than playing with extra spans or colors, just change the image’s opacity so the background shows through.