<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"> <div calss="hover-effect"> <div class="col-md-4"> <div class="hover-div"> <img src="http://ecx.images-amazon.com/images/I/81T5-nIQ7hL._UY550_.jpg" class="img-responsive"> <a href="#"> <div class="view-details"> <h4>View details</h4> </div> </a> </div> </div> </div> </div> <!-- http://dummyimage.com/340x400/000/fff --> </div>

.hover-div{ margin:0 auto; max-width:350px; margin-top:30px; border:1px solid #ccc; position:relative; overflow:hidden; } .hover-div{ } .hover-div img{ width:100%; transition:all ease-in-out .5s; } .view-details{ transition:all ease-in-out .5s; top:45%; left:32%; position:absolute; opacity:0; } .view-details h4{ transition:all ease-in-out .2s; background-color:#3ad0fc; padding:12px 24px; color:#fff; } .view-details:hover h4{ transition:all ease-in-out .2s; background-color:#0D1335; padding:12px 24px; color:#fff; } .hover-div:hover .view-details{ transition:all ease-in-out .5s; opacity:1; color:#000; top:42%; } .hover-div:hover img{ transition:all ease-in-out .5s; opacity:.6; transform: scale(1.2); }