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
html/css ?图片展示效果
原文地址：http://www.cnblogs.com/guangzhou11/p/7487081.html