body,div,li,p,ul {
margin:0;
padding:0;
font-size:14px;
font-family:"Microsoft Yahei","微软雅黑",sans-serif;
}
.clearfix::after {
clear:both;
display:block;
height:0;
content:'';
}
li,ul {
list-style:none;
}
#container {
margin:0 auto;
width:100%;
}
#container li {
position:relative;
float:left;
overflow:hidden;
margin:1%;
width:30%;
height:160px;
border:1px solid #ccc;
text-align:center;
line-height:160px;
cursor:pointer;
}
#container li img {
width:100%;
}
#container li p {
position:absolute;
top:-160px;
left:0;
z-index:2;
width:100%;
height:160px;
color:#fff;
}
#container li .img {
display:block;
width:100%;
height:160px;
-webkit-transition:.5s ease-in;
-moz-transition:.5s ease-in;
-o-transition:.5s ease-in;
transition:.5s ease-in;
-ms-transition:.5s ease-in;
}
#container li:nth-child(1) .img {
background-color:#E97305;
}
#container li:nth-child(2) .img {
background-color:#FFAAAA;
}
#container li:nth-child(3) .img {
background-color:#FFFF00;
}
#container li:nth-child(4) .img {
background-color:aqua;
}
#container li:nth-child(5) .img {
background-color:blueviolet;
}
#container li:nth-child(6) .img {
background-color:cadetblue
}
#container li:hover .img {
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
#container li p i {
position:absolute;
top:0;
left:0;
z-index:-1;
display:block;
width:100%;
height:100%;
background:#000;
font-size:16px;
opacity:.7;
-moz-opacity:.7;
filter:alpha(opacity=70);
}
#container li p span {
display:block;
margin:0 auto;
padding-top:60px;
width:94%;
font-size:12px;
line-height:24px;
}
#container li p a {
position:absolute;
top:20px;
left:50%;
display:block;
margin-left:-16px;
width:32px;
height:32px;
background:url(https://www.jq22.com/tp/6375197141508666897222181.png) no-repeat 0 0;
}
.explain {
display:block;
margin:0 auto;
}
更新时间:2021-03-22 00:59:07
背景色页可换成图片,只需将li下面的div换成img即可,可直接复用div的class样式。li中a标签可添加自己所需的链接地址。