<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="col-xs-12 col-md-4"> <div class="preview"> <div class="preview-wrapper"> <div class="inner-container"> <img src="https://c4.staticflickr.com/4/3810/12115019935_66e0892107_n.jpg" class="img-responsive preview-image"/> </div> <div class="menu-item"> <h4 style="color: #ffffff;">Title</h4> <a href="#" class="btn">Action 1</a> <a href="#" class="btn">Action 2</a> </div> </div> </div>

.preview{ transition: 0.5s; } .preview .preview-image{ transition: 0.5s; top: 0; height: 200px; width: 100%; position: absolute; } .preview .preview-image-show{ top: -88px; } .preview .inner-container{ position: relative; z-index: 2; transition: 0.5s; height: 200px; overflow: hidden; } .preview-wrapper{ position: relative; overflow: hidden; } .menu-item{ transition: 0.5s; height: 0; top: 200px; z-index: 1; position: absolute; width: 100%; padding: 10px; } .menu-item-show{ z-index: 3; visibility: visible; background-color: rgba(61, 61, 61, 0.88); height: 98px; width: 100%; top: 112px; }

$('.preview') .mouseenter(function(){ var menu = $(this).find('.menu-item'); var image = $(this).find('.preview-image'); menu.addClass("menu-item-show"); image.addClass("preview-image-show") }) .mouseleave(function(){ var menu = $(this).find('.menu-item'); var image = $(this).find('.preview-image'); menu.removeClass("menu-item-show"); image.removeClass("preview-image-show") });