demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品展示</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div class="demo" >
<ul>
<li>
<a href="http://baidu.com">
<img src="1.jpg"/>
<span>学会html5 你就是赢家</span>
</a>
</li>
<li>
<a href="http://baidu.com">
<img src="1.jpg"/>
<span>学会html5 你就是赢家</span>
</a>
</li>
<li>
<a href="http://baidu.com">
<img src="1.jpg"/>
<span>学会html5 你就是赢家</span>
</a>
</li>
</ul>
</div>
</body>
</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