Source code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css to achieve zoom effect when mouse moves in</title> <style type="text/css"> div{ width: 200px; height: 300px; margin:0 auto; margin-top: 100px; } div img{ width: 100%; height: 100%; transition: all 0.6s; //Set the animation execution time to 0.6s cursor: pointer; } div img:hover{ transform: scale(1.2); //Set the image to be enlarged by 1.2 times according to the ratio } </style> </head> <body> <div> <img src="images/unnamed.jpg"> </div> </body> </html> - Mask when the image overflows the div: Source code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css to achieve zoom effect when mouse moves in</title> <style type="text/css"> div{ width: 200px; height: 300px; margin:0 auto; margin-top: 100px; overflow: hidden; //The image is hidden when it exceeds the div } div img{ width: 100%; height: 100%; transition: all 0.6s; //Set the animation execution time to 0.6s cursor: pointer; } div img:hover{ transform: scale(1.3); //Set the image to be enlarged by 1.3 times according to the ratio } </style> </head> <body> <div> <img src="images/unnamed.jpg"> </div> </body> </html> This concludes this article about how to use CSS to achieve image zooming and slow transition effects when the mouse moves over the image. For more information on CSS image zooming when the mouse moves over the image, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future! |
<<: Hello dialog box design experience sharing
>>: Solution to MySQL connection exception and error 10061
Configuration file that needs to be loaded when t...
Table of contents Drop-down multiple-select box U...
background Use idea with docker to realize the wh...
Table of contents Cross-domain reasons JSONP Ngin...
Managing disk space is an important daily task fo...
Table of contents Previous words Synchronous and ...
Proxying multiple 302s with proxy_intercept_error...
XMeter API provides a one-stop online interface t...
Preface The most common task after we install a L...
1. Use Docker Compose to configure startup If you...
Nowadays, the screen resolution of computer monit...
Table of contents 1. props/$emit Introduction Cod...
Uninstall the installed version on Ubuntu: sudo a...
When it comes to remote desktop connection to Lin...
Before installing Tomcat, install the JDK environ...