Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in
|
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
Recommend
Basic tutorial on controlling Turtlebot3 mobile robot with ROS
Chinese Tutorial https://www.ncnynl.com/category/...
IE6/7 is going to be a mess: empty text node height issue
Preface: Use debugbar to view document code in iet...
MySQL 8.0.13 download and installation tutorial with pictures and text
MySQL is the most commonly used database. You mus...
Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)
1. overflow:hidden overflow hidden If overflow:hi...
Detailed explanation of Nginx forwarding socket port configuration
Common scenarios for Nginx forwarding socket port...
JS uses the reduce() method to process tree structure data
Table of contents definition grammar Examples 1. ...
CSS style to center the HTML tag in the browser
CSS style: Copy code The code is as follows: <s...
Example of JSON output in HTML format (test interface)
To display the JSON data in a beautiful indented ...
Simple CSS text animation effect
Achieve results Implementation Code html <div ...
Introduction to encryption of grub boot program in Linux
Table of contents 1. What is grub encryption 2. g...
Web page HTML ordered list ol and unordered list ul
Lists for organizing data After learning so many ...
Complete steps to configure basic user authentication at the Nginx level
Preface Application scenario: probably the intern...
jQuery clicks on the love effect
This article shares the specific code of jQuery&#...
Vue recursively implements custom tree components
This article shares the specific code of Vue recu...
Commonly used English fonts for web page creation
Arial Arial is a sans-serif TrueType font distribu...