<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"> <div class="col-sm-6 col-md-3"> <div class="box"> <div class="box-img"> <img src="https://www.indior.tours/images/India_Gate,_Delhi.webp" alt=""> </div> <div class="content"> <h3 class="title">Lorem ipsum dolor</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur. </p> <ul class="social-links"> <li><a href="#" class="fab fa-facebook"></a> </li> <li><a href="#" class="fab fa-twitter"></a> </li> <li><a href="#" class="fab fa-linkedin"></a> </li> </ul> </div> </div> </div> </div> </div>

.box{ position:relative; overflow: hidden; } .box .box-img{ transform: translateX(0px); transition:transform 0.40s linear ; } .box:hover .box-img{ transform: translateX(100%); } .box .box-img img{ width: 100%; height: auto; } .box .content{ position: absolute; top:0; right: 100%; width:100%; height:100%; padding:5%; text-align:center; background:#e67e22; transition:right 0.40s linear; } .box:hover .content{ right:0%; } .box .title{ font-size:18px; text-transform:capitalize; color:#fff; margin: 5% 0 0; } .box .description{ color:#fff; } .box .title:after, .box .description:after{ content: ""; border-bottom: 1px solid #fff; display: block; margin:3% auto; width: 57%; } .box .social-links{ padding:0; margin:0; } .box .social-links li{ list-style:none; display:inline-block; margin-right:15px; } .box .social-links li a{ color:#fff; font-size:18px; } @media only screen and (max-width: 990px) { .box{ margin-bottom:20px; } }