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

Basic tutorial on controlling Turtlebot3 mobile robot with ROS

Chinese Tutorial https://www.ncnynl.com/category/...

IE6/7 is going to be a mess: empty text node height issue

Preface: Use debugbar to view document code in iet...

MySQL 8.0.13 download and installation tutorial with pictures and text

MySQL is the most commonly used database. You mus...

Detailed explanation of Nginx forwarding socket port configuration

Common scenarios for Nginx forwarding socket port...

JS uses the reduce() method to process tree structure data

Table of contents definition grammar Examples 1. ...

CSS style to center the HTML tag in the browser

CSS style: Copy code The code is as follows: <s...

Example of JSON output in HTML format (test interface)

To display the JSON data in a beautiful indented ...

Simple CSS text animation effect

Achieve results Implementation Code html <div ...

Introduction to encryption of grub boot program in Linux

Table of contents 1. What is grub encryption 2. g...

Web page HTML ordered list ol and unordered list ul

Lists for organizing data After learning so many ...

Complete steps to configure basic user authentication at the Nginx level

Preface Application scenario: probably the intern...

jQuery clicks on the love effect

This article shares the specific code of jQuery&#...

Vue recursively implements custom tree components

This article shares the specific code of Vue recu...

Commonly used English fonts for web page creation

Arial Arial is a sans-serif TrueType font distribu...