<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <div class="box-img"> <img src="https://www.indior.tours/images/India_Gate,_Delhi.webp" alt=""> <span class="over-layer"></span> </div> <div class="box-content"> <h3 class="title">Lorem ipsum dolor</h3> <p class="description"> Lorem ipsum dolor consectetur adipisicing elit. Ipsa, tempor ibus sit amet, consectetur adipisicing elit. Ipsa, temporibus? </p> <ul class="links"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> </div>

.box{ position: relative; overflow: hidden; border:3px solid #e74c3c; } .box .box-img img{ width:100%; height: auto; transform:scale(1,1); transition:all 0.50s ease 0s; } .box:hover .box-img img{ transform:scale(1.1,1.1); } .box .box-img .over-layer{ width:100%; height:100%; display: block; opacity:0; position: absolute; top:0; background:rgba(234, 97, 83,0.8); transition:all 0.50s ease 0s; } .box:hover .over-layer{ opacity:1; } .box .box-content{ position: absolute; top:0; width:100%; height:100%; opacity:0; padding:5%; text-align:center; transition: all 0.50s ease 0s; } .box:hover .box-content{ opacity:1; } .box .title{ color:#fff; font-size:22px; margin-bottom:15px; text-transform:capitalize; } .box .description{ color:#fff; font-size:15px; margin-bottom:20px; } .box .links{ padding:0; margin:0; } .box .links li{ display:inline-block; list-style:none; margin-right:15px; } .box .links li a{ width: 35px; height: 35px; line-height: 35px; display: block; border-radius:10%; color:#e74c3c; background:#fff; } .box .links li a i{ transform: scale(1,1); transition: transform 0.50s ease; } .box .links li a:hover i{ transform:scale(1.2,1.2); } @media only screen and (max-width: 990px) { .box{ margin-bottom: 20px; } } @media only screen and (max-width: 479px) { .box .title{ margin-top: 0; } .box .description{ margin-bottom: 10px; } } License Terms