images a:hover

[Geload]

i resize some images on my blog to fit the theme, so i have decided to make a dark, transparent overlay on the image that says "click to enlarge" whenever the mouse hovers over the image

i have the png for the overlay ready, but im not sure how you would code that in css,

and all my images are under the class ".postimage"

so i was thinking something about .postimage a:hover?

thanks!

[Sandor]

.postimage:hover should work but it wont work at all in IE6 and i dunno if it works in the latest IE versions

[speedy_kevin]

Why dont you use Javascript?

Might be outdated, but the easiest way I learned to do mouseover on images.

[Geload]

nope .postimage:hover does not work =(

and how would i use javascript for that, because im using wordpress, is there a plugin for that?

thanks

[vrif]

My guess since it is a class and assuming it is under an id "main" (I never used word press so I'm just making up a random id) and if the class is part of an img. I would say try "#main img..portimage:hover". That extra dot in front of portimage just makes it look odd. Or you could try, "img..portimage:hover".

[~Matt~]

Its

a.postimage:hover

[EDIT]The class has to go after the html element

[Geload]

sorry but none worked for me..

im thinking is there a plugin like a javascript for it or anyhing? a bit like the lightbox, but its just the hover onto the image and overlays the image with a darker color

[sweetsam]

First :hover will work only for a in IE6. In other browsers including ie7 it works for all elements. The best way to do what you are after is to enclose the image and a span for the overlay inside a as show below.

<a class="gallery" href=""><span class="overlay"></span><img src="" /></a>

The css...

a.gallery, a.gallery:visited {
width: (width of image);
height: (height of image);
display: block;
position: relative;
}
a.gallery, a.gallery:visited img {
display: block;
}
span.overlay {
top: 0;
left: 0;
height: (height of overlay image);
width: (width of overlay image);
display: block;
position: absolute;
margin-left: -9000px;
background: (set overlay image as background);
}
a.gallery:hover span.overlay {
margin: 0;
}