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
Chinese Tutorial https://www.ncnynl.com/category/...
Preface: Use debugbar to view document code in iet...
MySQL is the most commonly used database. You mus...
1. overflow:hidden overflow hidden If overflow:hi...
Common scenarios for Nginx forwarding socket port...
Table of contents definition grammar Examples 1. ...
CSS style: Copy code The code is as follows: <s...
To display the JSON data in a beautiful indented ...
Achieve results Implementation Code html <div ...
Table of contents 1. What is grub encryption 2. g...
Lists for organizing data After learning so many ...
Preface Application scenario: probably the intern...
This article shares the specific code of jQuery...
This article shares the specific code of Vue recu...
Arial Arial is a sans-serif TrueType font distribu...