01-thumb-grid.html

<ul class="thumbnails" id="hover-cap-4col">
<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>
...
weitere Elemente
...
</ul>

02-thumb-grid-css.html

<style>
  #hover-cap-4col .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;
}
</style>

03-thumb-grid-jquery.html

<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-4col .thumbnail').hover(
		function(){
			$(this).find('.caption').slideDown(250); //.fadeIn(250)
		},
		function(){
			$(this).find('.caption').slideUp(250); //.fadeOut(205)
		}
	);	

});		
</script>