Image Comparison code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Comparison</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="imageBox imageBefore"><img src="image1.jpg"></div> <div class="imageBox imageAfter"><img src="image3.jpg"></div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 800px; height: 400px; } .imageBox { position: absolute; top: 0; left: 0; } .imageAfter { width: 50%; transition: 2s; overflow: hidden; border-right: 10px solid red; } .container:hover .imageAfter { width: 100%; }
