<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"> <section class="image-effect"> <div class="row"> <div class="col-md-6"> <div class="img-content"> <img src="https://placeimg.com/640/480/any"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </div> <div class="col-md-6"> <div class="img-content"> <img src="https://placeimg.com/640/480/any"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </div> </div> </section> </div> </div>

.image { display: block; width: 100%; height: auto; } .img-content { position: relative; } img { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; background-image: linear-gradient( to right, hsl(344, 100%, 50%), hsl(31, 100%, 40%)); transition: opacity .3s ease-in 0s,transform .3s ease-in 0s,-webkit-transform .3s ease-in 0s; opacity: 0; overflow: hidden; } .img-content:hover .overlay { opacity: 1; } .img-content:hover .overlay .text { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .text { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); transition: opacity .3s ease-out .1s, -webkit-transform .3s ease-out .1s; }