Bootstrap Thumbnail

Making repsonsive overlays on thumbnail.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.js"></script>
 <div class="container">
 <div class="row">
 <div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>
         
<div class="thumbnail">
      <a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">
   
 <div class="caption">
                     <h4 class="">Richard Feynman</h4>
                     <p class="">
                     
                     Watch Him</p>
</div><!-- /.caption--> 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive">
      </a>
</div><!-- /.thumb--> 
        </div><!-- /.col --> 

 </div><!--end row-->

</div><!-- /.container -->

CSS

.thumbnail {
    position:relative;
    overflow:hidden;
  background: transparent;
  border:none;

}
.caption {
    position:absolute;
    top:0;
    right:0;
    background:rgba(0, 0, 0, 0.75);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align: left;
    color:#fff !important;
    z-index:2;
     background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center; 
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */  $("[rel='tooltip']").tooltip();    
     $(document).ready(function() {
    $('.thumbnail').hover(
        function(){
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    ); 

    });