<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="image"> <img src="images/tab1.jpg" alt="Avatar" > <div class="overlay"> <a href="images/open.png"><div class="text" href="#"><i class="fa fa-search" aria-hidden="true"></i></div></a> </div> </div><!--image-->

.image { display: block; width: 100%; position: relative; } .image img{ width: 100%; } .image .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(15, 180, 224, 0.3); overflow: hidden; width: 0; height: 100%; transition: 1s ease; display:block; } .image:hover .overlay { width: 100%; } .text{ padding: 10px 0 0 0; height: 50px; width: 50px; border-radius: 50%; background-color: #fff; color: #0fb4e0; font-size: 20px; position: absolute; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .text:hover{ color: #fff; background-color: #0fb4e0; } /* end image overlay */