"#Hover #Effect"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

<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); }

Questions / Comments:

Related: See More