Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to use pure css3 to achieve picture click pop-up animation mask layer effect", the content is detailed, the steps are clear, the details are handled properly, I hope this article "how to use pure css3 to achieve picture click pop-up animation mask layer effect" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

This is a very useful plug-in for click-and-pop animation mask layer effects for pure css3 images. Checked pseudo elements and sibling selectors are used in the plug-in.

HTML

The html structure includes a title, a description, and a preview content. The preview content is used as a mask layer effect. A checkbox, a picture, and a div for placing comments are used in demo to do this. The secret of this effect is to place the checkbox on top of all other elements, so clicking on the pictures and comments is actually clicking on checkbox. Checkbox should be placed in the first place so that you can use the sibling selector to find pictures and comments.

You can put in multiple span, and then use css to control their respective positions.

The last part of the css code uses media queries to make the plug-in suitable for small screens:

@ media screen and (max-width: 730px) {

. ao-item. Ao-details

. ao-preview {

Float: none

Width: 100%

Padding: 0

Text-align: left

}

. ao-annotations span {

Font-size: 11px

}

}

Read here, this "how to use pure css3 to achieve picture click-and-pop animation mask layer effect" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.