Bootstrap Tutorial - Fade in/out text over image








The following code shows how to fade in/out text over image.

Example

<!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>

Click to view the demo