CSS3: Use On-hover Event to Set Semi-transparent Overlay on an Image

I need an on hover semi-transparent div which causes some text开发者_StackOverflow中文版 to appear over the top of a thumbnail image? Is it possible to do this without using JavaScript and using just Cascading Style Sheet?

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>

Ok ok I know this is old but i ran into and have something to add about opacity settings

http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/

give that a look over, I find using rgba when ever possible over opacity procuces a much better result, opacity can work funny in different browsers and cause all manner of asthetic problems... just my 2 cents

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.