<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1 class="title" align="center">Image Overlay Hover</h1> <div align="center"> <div> <div class="container"> <img src="https://i.pinimg.com/originals/18/14/9a/18149afc5f3901fc22be42aef0d1463c.jpg" alt="img" class="image"> <div class="overlay overlayleft"> <div class="text">left</div> </div> </div> <div class="container"> <img src="https://wallpaperstudio10.com/static/wpdb/wallpapers/560x315/150206.jpg" alt="img" class="image"> <div class="overlay overlayRight"> <div class="text">Right</div> </div> </div> <div class="container"> <img src="http://inspiredboy.com/uploads/201509/full/desert-camel-egyptian-pyramids-hd-picture-3-1-91c416c2984cb3f9faad05a627da9670.jpg" alt="img" class="image"> <div class="overlay overlayFade"> <div class="text">Fade</div> </div> </div> </div> <div> <div class="container"> <img src="https://www.planwallpaper.com/static/images/Western-Country-Cowboy-HD-Wallpaper.jpg" alt="img" class="image"> <div class="overlay overlayTop"> <div class="text">Top</div> </div> </div> <div class="container"> <img src="https://wallpaperclicker.com/storage/wallpaper/house-hd-wallpaper-desktop-41945952.jpg" alt="img" class="image"> <div class="overlay overlayBottom"> <div class="text">Bottom</div> </div> </div> <div class="container"> <img src="https://www.planwallpaper.com/static/images/96d186ef9ae1d063b50bc1d9a03af5cc--mobile-wallpaper-photo-wallpaper.jpg" alt="img" class="image"> <div class="overlay overlayCross"> <div class="text">Cross</div> </div> </div> </div> </div>

.title { font-family: sans-serif; font-size: 3rem; font-weight: 700; } .container { position:relative; width:200px; height:200px; display:inline-block; } .image { display:block; width:200px; height:200px; } .overlay { position:absolute; transition:all .3s ease; opacity:0; transition:0.9s; background: #00b1bab8; } .container:hover .overlay { opacity:1; } .text { color:white; font-family: sans-serif; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size: 20px; } .overlayleft { height:100%; width:0; top:0; left:15px; background: #00b1bab8; } .overlayRight { height:100%; width:0; top:0; right:-15px; background: #00b1bab8; } .container:hover .overlayleft, .container:hover .overlayRight { width:100%; } .overlayTop { width:100%; height:0; top:0; left:15px; background: #00b1bab8; } .overlayBottom { width:100%; height:0; bottom:0; left:15px; background: #00b1bab8; } .container:hover .overlayTop, .container:hover .overlayBottom { height:100%; } .overlayCross { width:0; height:0; top:0; left:15px; background: #00b1bab8; } .container:hover .overlayCross { height:100%; width:100%; } .overlayFade { height:100%; width:100%; top:0; left:15px; background: #00b1bab8; }