Image hover with text Overlay Effect ( Source Code )

Image hover with text Overlay Effect ( Source Code )

HTML

<div class="img-area"> <h2> Image Hover Overlay</h2> <div class="single-img"> <img src="https://i.postimg.cc/9fnXGD2W/1.jpg" alt="Avatar" class="image"> <div class="img-overlay"> <div class="text"> Palm Beach <br><span>Florida</span></div> </div> </div> <div class="single-img"> <img src="https://i.postimg.cc/90jhpTnj/3.jpg" alt="Avatar" class="image"> <div class="img-overlay"> <div class="text"> McWay Falls<br><span>California</span></div> </div> </div> <div class="single-img"> <img src="https://i.postimg.cc/sgf3qYDj/2.jpg" alt="Avatar" class="image"> <div class="img-overlay"> <div class="text"> Blue Beach <br><span>Puerto Rico</span></div> </div> </div> </div>


CSS


body{ background: #262626; } h2 { text-align: center; color: #fff; font-size: 50px; font-family:Audiowide; } .img-area{ width: 1170px; margin: 2% auto; } .single-img { position: relative; width: 30%; float: left; margin: 0 1%; } .image { display: block; width: 100%; height: auto; } .img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #144775; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .single-img:hover .img-overlay { height: 100%; } .text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; text-align: center; font-size: 20px; font-family: poppins; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; } .text span{ font-weight: 300; }