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

This article mainly introduces HTML how to achieve web box hidden sliding effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this HTML how to achieve web box hidden sliding effect article will have a harvest, let's take a look at it.

Code:

Ul,li {list-style: none;margin: 0 * * padding: 0;}

Ul {

Width: 900pxposition height: 220px

Margin: 50px auto

}

Ul li {

Width: 200pxposition height: 200px

Border: 3px solid black

Float: left

Background: url (10 classroom materials / 01.jpg)

Background-size: 200px

Position: relative

Overflow: hidden

}

Li:nth-child (2) {

Background: url (10 classroom materials / 02.jpg)

Background-size: 200px

}

Li:nth-child (3) {

Background: url (10 classroom materials / 03.png)

Background-size: 250px

}

.li:nth-child (4) {

Background: url (10 classroom materials / 04.png)

Background-size: 200px

}

Ul li hgroup {

Width: 200pxposition height: 200px

Position: absolute

Top:220px

Left:0px

Background: rgba (255, 255, 255, 0.5)

Transition: all 2s

}

Ul li:hover hgroup {

Display: block

Position: absolute

Top:0px

Left: 0px

}

Waiting for you

Next

Waiting for you

Please enjoy

Waiting for you

Page effect

Waiting for you

Slide

This is the end of the article on "how to achieve the hidden sliding effect of web box in HTML". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how HTML realizes the hidden sliding effect of web box". If you want to learn more, you are welcome to follow 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.