鼠标放上，图片放大

<style type="text/css">
 .box li{float:left; width:105px;height:90px;overflow:hidden; text-align:center;}
.box li p{ display:block;width:95px;overflow:hidden; height:25px; line-height:25px; text-align:center; margin:0 5px;}
.box li span a{width:95px; height:53px; overflow:hidden;text-align:center; display:block; border:1px #000 solid;}
.box li span a img{width:95px; height:53px; border:none;}
.box li span a:hover{border:5px #000 solid;position:absolute;width:150px;height:88px;overflow:hidden; margin: -15px 0 0 -15px;}
.box li span a:hover img{width:150px;height:88px;order:none;}
</style>

 

  <ul class="box">
<li><span><a href="#"><img src="ps处理后的图片/DSCF1819.jpg"></a></span><p>DDD</p></li>
<li ><span><a href="#"><img src="ps处理后的图片/路径面板使用.jpg"></a></span><p>DDD</p></li>
<li ><span><a href="#"><img src="ps处理后的图片/DSCF1819.jpg"></a></span><p>DDD</p></li>
<li ><span><a href="#"><img src="ps处理后的图片/DSCF1819.jpg"></a></span><p>DDD</p></li>
<li ><span><a href="#"><img src="ps处理后的图片/DSCF1819.jpg"></a></span><p>DDD</p></li>
<li ><span><a href="#"><img src="ps处理后的图片/DSCF1819.jpg"></a></span><p>DDD</p></li>
</ul>

转载于:https://www.cnblogs.com/dotnetlina/archive/2011/10/19/2218255.html