Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in

Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in

transform:scale() can achieve proportional zooming in or out.
transition can set the animation execution time to achieve slow or fast animation execution. The effect diagram is as follows:

insert image description here

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:

insert image description here

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...

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...

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...