Home >Web Front-end >Front-end Q&A >How to enlarge the image by clicking the mouse in css3

How to enlarge the image by clicking the mouse in css3

青灯夜游
青灯夜游Original
2022-04-25 16:52:385561browse

Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale( x-axis magnification, y-axis magnification);}".

How to enlarge the image by clicking the mouse in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 realizes mouse click to enlarge the image

Implementation idea:

  • Use ":active" The selector selects the state of the mouse clicked image

  • Use the transform attribute and scale() function to achieve the magnification effect

Syntax:

img:active {transform: scale(2,2);}

Implementation example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img:active {
margin: 100px;
transform: scale(2, 2);
}
</style>
</head>
<body>
<img  src="img/1.jpg"    style="max-width:90%" / alt="How to enlarge the image by clicking the mouse in css3" >
</body>
</html>

How to enlarge the image by clicking the mouse in css3

Description:

The English interpretation of active is "positive", which is reflected in Clicking on the mouse means clicking. The most common examples of the active selector are probably applied to links. However, opening a link is a momentary action, which does not reflect the characteristics of the active selector well.

TheTransform property applies a 2D or 3D transformation to the element. This property allows you to rotate, scale, move, tilt, etc. the element. When this attribute is used together with the scale() function, the attribute element will be scaled.

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of How to enlarge the image by clicking the mouse in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn