Question

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

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>