<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- TH1 --> <div class="col-sm-4"> <div class="thumbnail"> <a href="#" class=""> <div class="caption"> <h4 class="">Thumbnail Headline</h4> <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </p> </div> <img src="http://placehold.it/350x250" alt="..." class=""> </a> </div> </div> <!-- TH2 --> <div class="col-sm-4"> <div class="thumbnail"> <a href="#" class=""> <div class="caption"> <h4 class="">Thumbnail Headline</h4> <p class="">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium </p> </div> <img src="http://placehold.it/350x250" alt="..." class=""> </a> </div> </div> <!-- TH2 --> <div class="col-sm-4"> <div class="thumbnail"> <a href="#" class=""> <div class="caption"> <h4 class="">Thumbnail Headline</h4> <p class="">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum </p> </div> <img src="http://placehold.it/350x250" alt="..." class=""> </a> </div> </div> <!-- TH4 --> <div class="col-sm-4"> <div class="thumbnail"> <div class="caption"> <h4 class="">Thumbnail Headline</h4> <p class=""> <a href="#" class="label label-default">Open</a> </p> </div> <img src="http://placehold.it/350x250" alt="..." class=""> </div> </div> <!-- TH5 --> <div class="col-sm-4"> <div class="thumbnail"> <div class="caption"> <h4 class="">Thumbnail Headline</h4> <p class=""> <a href="#" class="label label-default">Open</a> </p> </div> <img src="http://placehold.it/350x250" alt="..." class=""> </div> </div> <!-- TH6 --> <div class="col-sm-4"> <div class="thumbnail"> <div class="caption"> <h4 class="">Thumbnail Headline</h4> <p class=""> <a href="#" class="label label-default">Open</a> </p> </div> <img src="http://placehold.it/350x250" alt="..." class=""> </div> </div> <!-- TH6 --> </div><!--/row --> </div> <!-- end container -->

body { padding-top: 50px; } .thumbnail { position:relative; overflow:hidden; } .caption { position:absolute; top:0; right:0; background:rgba(90, 90, 90, 0.75); width:100%; height:100%; padding:2%; display: none; text-align: left; color:#fff !important; z-index:2; }

$(document).ready(function() { $("[rel='tooltip']").tooltip(); $('.thumbnail').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } ); });