Home > Article > Web Front-end > 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:385472browse
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);}".
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>
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!