Image Hover Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="imgBox"> <img src="image1.jpg"> <div class="container"> <div class="content"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1> <p>Natus sit culpa optio deleniti numquam incidunt aliquid, nulla quod tempora iure nobis aspernatur repudiandae maiores! Officia magnam incidunt non adipisci ullam!</p> </div> </div> </div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: black; font-family: Arial, Helvetica, sans-serif; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .imgBox { position: relative; width: 500px; height: 300px; background-size: cover; border: 2px solid white; overflow: hidden; } .imgBox img { width: 100%; transition: 0.5s; } .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; transition: 0.5s; } .container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transform: translateX(-100%) scale(1) skew(-45deg); transition: 0.5s; } .content { position: absolute; top: 50%; transform: translateY(-50%); padding: 30px 50px; text-align: center; } .content h1 { padding: 0; color: white; margin-bottom: 20px; font-size: 1.5em; transform: translateY(-100%) scale(0); } .content p { padding: 0; color: white; font-size: 1em; transform: scale(2); transition: 0.5s; opacity: 0; } .imgBox:hover .content h1 { transform: translateY(0) scale(1); } .imgBox:hover .content p { transform: scale(1); opacity: 1; } .imgBox:hover img { transform: scale(2) translateX(-50px); } .imgBox:hover .container::before { opacity: 1; background: rgba(255,0,0,0.8); transform: translateX(0) scale(1) skew(-45deg); }
