<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <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>

.cours2{ margin-top:30px; } .cours2{ position:relative; margin-bottom:50px; } img.hover { width: 100%; } .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; }