The following code shows how to fade in/out text over image.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
.thumbnails li {<!-- ww w .j a v a 2 s . co m-->
position: relative;
}
.thumbcontainer {
background: #fff;
opacity: .9;
position: absolute;
top: 0;
width: 100%;
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('#thumbs > li').mouseenter(function() {
$(this).find("div").fadeIn();
}).mouseleave(function(){
$(this).find("div").fadeOut();
});
});
//]]>
</script>
</head>
<body>
<ul id="thumbs" class="thumbnails">
<li><img src="http://placehold.it/150x150" />
<div class="thumbcontainer">bezzz</div>
<ul class="thumbicons">
</ul>
</li>
</ul>
</body>
</html>