Bootstrap - Thumbnail Hover Caption with Tooltip Blog Article: http://goo.gl/x2GSQ

Bootstrap-thumbnail-hover-grid.html

<!-- Bootstrap Markup -->
<div class="container">
<ul class="thumbnails" id="hover-cap"> <!-- add id attr to thumbnail list -->
<li class="span3">
  <div class="thumbnail">
    <div class="caption">
        <h4>Caption Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
        <p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a></p>
    </div>
    <img src="http://placehold.it/600x400" alt="ALT NAME">
  </div>
  <h4>Item Name</h4>
</li>
...
more li elements
...
</ul>
</div>

script.js

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
    $("[rel='tooltip']").tooltip();    
 
    $('#hover-cap .thumbnail').hover(
        function(){
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    );    
 
});        
</script>

style.css

/* additional style */
#hover-cap .thumbnail {
    position:relative;
    overflow:hidden;    
}
.caption {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    color:#fff !important;
}