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 hide the text in the a tag and display the image? Compatible with 360 mode rendering
Often you will encounter a style of <a> tag ...
Solution to the problem that the audio component of WeChat applet cannot be played on iOS
Solution: Bind the click event to the audio compo...
Django+vue registration and login sample code
register The front-end uses axios in vue to pass ...
Understanding render in Vue scaffolding
In the vue scaffolding, we can see that in the ne...
Linux yum package management method
Introduction yum (Yellow dog Updater, Modified) i...
Tutorial on Installing Nginx-RTMP Streaming Server on Ubuntu 14
1. RTMP RTMP streaming protocol is a real-time au...
Detailed explanation of MySQL combined index and leftmost matching principle
Preface I have seen many articles about the leftm...
Illustration-style website homepage design New trend in website design
You can see that their visual effects are very bea...
Method for comparing the size of varchar type numbers in MySQL database
Create a test table -- --------------------------...
Summary of standard usage of html, css and js comments
Adding necessary comments is a good habit that a ...
An article to help you understand jQuery animation
Table of contents 1. Control the display and hidi...
Detailed Analysis of Explain Execution Plan in MySQL
Preface How to write efficient SQL statements is ...
How to start multiple MySQL databases on a Linux host
Today, let’s talk about how to start four MySQL d...
How to change the terminal to a beautiful command line prompt in Ubuntu 18
I reinstalled VMware and Ubuntu, but the command ...
Implementation of Nginx domain name forwarding https access
A word in advance: Suddenly I received a task to ...