image hovers

please help me with this!

[mktl427]

hi on my page i used to have an image hover where it would be blurry when i would hover my mouse over any image on the page. now i would like to find out if its possible if i can do the same thing, but instead of blurring or engraving the already present image, if i could place another image over it while still revealing the old image. however, i am puzzled of how to do this because i cant do it for every image so i am stuck. please help!

[tedster]

Hello, and welcome to the forums.

You could make the original image display as a background-image, with the foreground being a transparent gif. Then you would use javascript onmouseover (rather than css a:hover) to switch out the foreground omage to one with some content and some transparency.

But that's likely to get very complex, with edge pixels and so on. Until IE fully supports png transparency, I think the best approach is to create a new hover image that is based on the original image. It will give the effect you want, but it will still be only one image.