<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fade').hover(function() {
$(this).stop().animate({"opacity": 1});
},function() {
$(this).stop().animate({"opacity": .5});
});
});
</script>
</head>
<body>
`<!--start image with caption-->`
<div class="image" style="width:255px;height:188px;background:url(images/image.jpg) no-repeat 0 0;"></div>
<div class="fade" style="background:#01ADEF;width:255px;height:58px;position:absolute;top:138px;left:5px;z-index:2;">text</div>
`<!--end image with caption-->`
</body>
</html>