Is there anyway to get an on hover semi-transparent overlay on an image using CSS3?

Question

I need an on hover semi-transparent div which includes some text to appear over the top of a thumbnail image? Is it possible to do this without using JS and use just CSS?

Answer 1

You can try something like this:

<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
    <div class="overlay"></div>
    <img src="image.gif" />
</div>

Answer 2

Depending on what you're doing with the thumbnail, you could set the background of the DIV as the image, include the text, and use CSS to toggle the visibility from transparent to solid on hover.

This'd only work cleanly if you have a known-size thumbnail (because it's hard to autosize a div to the size of its background image), but it'll make for a simple solution in your html:

<div class="thumb" style="background-image: url(thumb.jpg);">
     <p>mouseover text</p>
</div>

The important css would be something like this...

div.thumb p { visibility: hidden; }
div.thumb:hover p { visibility: visible; }

Not sure from your question whether the whole div is supposed to be transparent or just the text, but you can apply the relevant CSS at either level.