Split Image On Hover Code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Split Image On Hover</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="box"> <div class="about"> <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2> <p>Repellendus quisquam blanditiis cupiditate commodi doloribus rem numquam, iste consequuntur voluptatem vel fugiat quas cumque exercitationem reiciendis, saepe eveniet dignissimos, ab illum.</p> </div> <div class="figure"></div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; background: red; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 400px; background: black; } .about { padding: 40px; color: white; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } .about h2 { margin: 0; padding: 0; font-size: 30px; text-transform: uppercase; } .figure { width: 100%; height: 100%; } .figure::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: url(3.png); transform-origin: bottom; transition: 0.5s; } .box:hover .figure::before { transform: rotateX(90deg) translateY(50%); } .figure::after { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: url(3.png); transform-origin: top; transition: 0.5s; background-position: 300px; } .box:hover .figure::after { transform: rotateX(90deg) translateY(-50%); }
