How to click on the picture to enlarge by css

This article mainly explains "how css realizes click picture enlargement". the explanation content in this article is simple and clear, easy to learn and understand. please follow the idea of Xiaobian slowly and deeply to study and learn "how css realizes click picture enlargement" together!

In CSS, you can use the ":active" selector and transform attribute to achieve the effect of clicking on the image magnification, syntax is "image element:active{transform:scale(width magnification, height magnification);}".

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

Css click to enlarge the picture method

Create a new html file named test.html to explain how css doubles the size of an image when clicking on it.

In the css tag, use the transform attribute and set the two parameters of the scale attribute to 2 to double the image magnification. transform:scale(2,2); Defines a 2D scaling transform.

Use the:active selector to select the active link. That is, click on the picture to operate.

The sample code is as follows:

Document div{ width:350px; height:250px; background:url(1118.01.png); } div:active{ margin:100px; transform:scale(2,2); }

Open the test.html file in your browser to see how it works.

Thank you for reading, the above is "how to achieve css click image magnification" content, after the study of this article, I believe we have a deeper understanding of how to achieve css click image magnification this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!