demo.html
商品展示demo.css
div,ul,li,dl,dt,dd {
margin:0;
padding:0;
}
ul,li,dl,dt,dd {
list-style: none;
}
.demo{
width:930px;
}
.demo ul li {
float:left;
width:300px;
margin-right: 6px;
position:relative;
}
.demo ul li img{
border:none;
position:relative;
z-index:22;
}
.demo ul li a{
width:300px;
display:block;
border:2px solid #ccc;
}
.demo ul li a:hover{
border:2px solid #C03;
}
.demo ul li a span{
position:absolute;
z-index:33;
bottom:2px;
left:2px;
width:300px;
height:40px;
filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;
background:#000;
color:#fff;
line-height:40px;
text-align:center;
display:none;
}
.demo ul li a:hover span{
display:block;
}
效果:
图片
21:32:21 2017-09-06