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
How to redirect to https through nginx load balancing
Copy the certificate and key on the web scp -rp -...
SQL implementation LeetCode (176. Second highest salary)
[LeetCode] 176. Second Highest Salary Write a SQL...
Vue3 (III) Website Homepage Layout Development
Table of contents 1. Introduction 2. Actual Cases...
vue3 custom directive details
Table of contents 1. Registering custom instructi...
JS implements simple calendar effect
This article shares the specific code of JS to ac...
Solution to the problem that the virtualbox virtual machine cannot connect to the external network in NAT mode
background Two network cards are configured for t...
jQuery to achieve the barrage effect case
This article shares the specific code of jQuery t...
Detailed tutorial on Docker pulling Oracle 11g image configuration
Without further ado Start recording docker pullin...
Website construction experience summary
<br />What principles should be followed to ...
Detailed steps for smooth transition from MySQL to MariaDB
1. Introduction to MariaDB and MySQL 1. Introduct...
Summary of the use of Datetime and Timestamp in MySQL
Table of contents 1. How to represent the current...
Solve the problem of insufficient docker disk space
After the server where Docker is located has been...
Example code for implementing the wavy water ball effect using CSS
Today I learned a new CSS special effect, the wav...
Four modes of Oracle opening and closing
>1 Start the database In the cmd command windo...
Analysis of the principle implementation from the source code of the mini-program developer tool
Table of contents How to view the source code of ...