Image Zoom on Mouse Hover Code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Zoom on Mouse Hover</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="box"> <img src="7.png"> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: black; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; height: 800px; overflow: hidden; } .box img { transition: 2s; width: 100%; } .box:hover img { transform: scale(1.5) rotate(15deg); }
