"Hover Zooming Image"
Bootstrap 3.3.0 Snippet by istakhar

<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 class="col-md-4"> <div class="cours2" style="overflow:hidden;"> <img class="hover" src="https://cdn.shutterstock.com/shutterstock/videos/5276318/thumb/1.jpg" style="width:100%;height:200px;border:1px solid transparent;transition:1s;"> <div class="cours3"> <h2 style="text-align:center;margin-top:-6px;color:rgb(237,78,110);">ISTAKHAR</h2> <h5 style="text-align:center;">Teaching To Over Students To Making Applications..</h5> <h6 style="text-align:center;">Student Can Make Apropariats Are The Creating Applications Are The All About The Relivents If The Regarding..</h6> </div> <div class="cours4 text-center"> <button class="cou" style="border:1px solid transparent;padding:10px 20px ;font-size:16px;border-radius:10%;background-color:rgb(237,78,110);color:white;">View More</button> </div> </div> </div> <div class="col-md-4"> <div class="cours2" style="overflow:hidden;"> <img class="hover" src="https://cdn.shutterstock.com/shutterstock/videos/5276318/thumb/1.jpg" style="width:100%;height:200px;border:1px solid transparent;transition:1s;"> <div class="cours3"> <h2 style="text-align:center;margin-top:-6px;color:rgb(237,78,110);">ISTAKHAR</h2> <h5 style="text-align:center;">Teaching To Over Students To Making Applications..</h5> <h5 style="text-align:center;">Student Can Make Apropariats Are The Creating Applications Are The All About The Relivents If The Regarding..</h5> </div> <div class="cours4 text-center"> <button class="cou" style="border:1px solid transparent;padding:10px 20px ;font-size:16px;border-radius:10%;background-color:rgb(237,78,110);color:white;">View More</button> </div> </div> </div> <div class="col-md-4"> <div class="cours2" style="overflow:hidden;"> <img class="hover" src="https://cdn.shutterstock.com/shutterstock/videos/5276318/thumb/1.jpg" style="width:100%;height:200px;border:1px solid transparent;transition:1s;"> <div class="cours3"> <h2 style="text-align:center;margin-top:-6px;color:rgb(237,78,110);">ISTAKHAR</h2> <h5 style="text-align:center;">Teaching To Over Students To Making Applications..</h5> <h5 style="text-align:center;">Student Can Make Apropariats Are The Creating Applications Are The All About The Relivents If The Regarding..</h5> </div> <div class="cours4 text-center"> <button class="cou" style="border:1px solid transparent;padding:10px 20px ;font-size:16px;border-radius:10%;background-color:rgb(237,78,110);color:white;">View More</button> </div> </div> </div> </div> </div>
.course{ text-align:center; color:green; } .course1{ text-align:center; font-family:Bradley Hand ITC; } .cours2{ margin-top:30px; } .cours2{ position:relative; margin-bottom:50px; } .cours3{ -border:1px solid red; position:absolute; top:-100px; opacity:0; -bottom:100px; -background-color:rgba(142,198,63,.8); background-color:rgba(0,0,0,0.3); color:white; padding:10p; } .cours2:hover .cours3 { opacity:1; top:0px; transition:1s; } .cours4{ position:absolute; -border:1px solid red; -margin-top:-80px; padding-top:20px; width:100%; height:80px; opacity:0; bottom:-50px; -background-color:rgba(142,198,63,.8); background-color:rgba(0,0,0,0.3); } .cours2:hover .cours4{ opacity:1; bottom:0; transition:1s; } .cours2:hover .hover{ transform:scale(1.3); transition:1s; } .cours7{ border:1px solid rgb(73,183,43); background-color:rgb(73,183,43); color:white; font-size:18px; padding:10px 15px; border-radius:5px 20px; } .cours7:hover{ background-color:transparent; color:rgb(73,183,43); border:1px solid rgb(73,183,43); transition:1s; } .cou:hover{ background-color:transparent !important; color:rgb(237,78,110) !important; border:1px solid rgb(237,78,110) !important; }

Related: See More


Questions / Comments: