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
Add a startup method to Linux (service/script)
Configuration file that needs to be loaded when t...
ElementUI implements sample code for drop-down options and multiple-select boxes
Table of contents Drop-down multiple-select box U...
Detailed explanation of the latest IDEA process of quickly deploying and running Docker images
background Use idea with docker to realize the wh...
Multiple solutions for cross-domain reasons in web development
Table of contents Cross-domain reasons JSONP Ngin...
Summary of Linux Logical Volume Management (LVM) usage
Managing disk space is an important daily task fo...
Use a few interview questions to look at the JavaScript execution mechanism
Table of contents Previous words Synchronous and ...
Solution to multiple 302 responses in nginx proxy (nginx Follow 302)
Proxying multiple 302s with proxy_intercept_error...
Analysis of the usage of Xmeter API interface testing tool
XMeter API provides a one-stop online interface t...
How to view available network interfaces in Linux
Preface The most common task after we install a L...
Teach you the detailed process of using Docker to build the Chinese version of gitlab community
1. Use Docker Compose to configure startup If you...
Example code for using @media in CSS3 to achieve web page adaptation
Nowadays, the screen resolution of computer monit...
In-depth understanding of the seven communication methods of Vue components
Table of contents 1. props/$emit Introduction Cod...
Problems installing TensorRT in docker container
Uninstall the installed version on Ubuntu: sudo a...
Remote Desktop Connection between Windows and Linux
When it comes to remote desktop connection to Lin...
Detailed tutorial on installing Tomcat8.5 in Centos8.2 cloud server environment
Before installing Tomcat, install the JDK environ...