Xuanmo Blog

运用berfore做一个计数器和遮盖层，练习下css3选择器

css源码：

div:nth-child(1){
width: 100%;
height: 100%;
background: url(../img/1.jpg) no-repeat center;
background-size: 100% 100%;
transition: .7s;
}
ul{
counter-reset: count 0;
position: absolute;
top: 50%;
left: 50%;
width: 650px;
margin: -117px 0 0 -310px;
}
ul li{
float: left;
overflow: hidden;
position: relative;
width: 200px;
height: 112px;
border: 5px solid #e1e1e1;
cursor: pointer;
}
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3){
margin-bottom: 10px;
}
ul li:nth-child(2),
li:nth-child(5){
margin: 0 10px;
}
li span:before{
content: "第" counter( count ) "张";
counter-increment: count 1;
position: absolute;
top: -112px;
width: 200px;
height: 112px;
background: rgba(255,255,255,.5);
text-align: center;
line-height: 112px;
transition: .7s;
}
ul li:hover span:before{
top: 0;
}

DEMO展示