Image Zoom on Mouse Hover

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); }

Оставьте комментарий

Ваш адрес email не будет опубликован.