Image Hover Effect with Sliding Caption ( Source Code )

Image Hover Effect with Sliding Caption ( Source Code )

HTML

<div class="wrapper"> <div class="img-area"> <img src="https://i.postimg.cc/kGXngD5r/1.jpg"></div> <div class="img-text"> <h2> Robin Williams</h2> <h3> Web Designer</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam blanditiis doloribus est saepe tempora, vel.</p> <p class="socials"> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i> <i class="fa fa-youtube"></i></p> </div> </div>

CSS


body { margin: 0; padding: 0; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 450px; height: 300px; overflow: hidden; } .img-area, .img-text { width: 100%; height: 100%; position: absolute; box-sizing: border-box; transition: .5s; } .wrapper .img-area { top: 0; left: 0; } .wrapper:hover .img-area { top: 0; left: -100%; } .img-area img { width: 100%; } .img-text { text-align: center; background: linear-gradient(to bottom, #BB3560, #1F256F); top: 0; left: 100%; padding: 60px 30px; } .img-text h2 { color: #fff; text-align: center; margin: 0; padding: 0 0 10px; font-family: shrikhand; letter-spacing: 2px; font-weight: 100; } .img-text h3 { color: #fff; margin: 0; font-family: poppins; } .img-text p { font-family: merienda; font-size: 14px; margin: 20px 0 0; color: #fff; } .socials i { width: 30px; height: 30px; border: 1px solid #fff; padding: 5px; line-height: 28px; } .wrapper:hover .img-text { top: 0; left: 0%; }