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

Basic operations of mysql learning notes table

Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

Blog

Detailed explanation of basic concepts of HTML

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

Basic operations of mysql learning notes table

Solution to the problem of invalid width setting for label and span

Vue3 Documentation Quick Start

A brief discussion on the principle of Vue's two-way event binding v-model

Insufficient memory problem and solution when docker starts elasticsearch

Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

Detailed explanation of basic concepts of HTML

Some parameter descriptions of text input boxes in web design

How to set the page you are viewing to not allow Baidu to save its snapshot

Implementation of mysql decimal data type conversion

Recommend

CSS isolation issue in Blazor

How to set the position of the block element in the middle of the window

Parsing Apache Avro Data in One Article

Linux system file sharing samba configuration tutorial

Detailed explanation of the use of CSS pointer-events attribute

Linux directory switching implementation code example

Detailed explanation of some settings for Table adaptation and overflow

Detailed explanation of the process of docker packaging Python environment

Implementation of textarea adaptive height solution in Vue

A brief discussion on simulating multi-threaded and multi-process crashes in Linux

TypeScript Mapping Type Details

JavaScript function call classic example code

Full analysis of Vue diff algorithm

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

Implementation of MySQL's MVCC multi-version concurrency control