How to enlarge the image by clicking the mouse in css3

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:

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!