鼠标放上去图片放大的一个效果（css）

 

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;}

 

html部分：

<ul id="box">
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li ><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li ><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li ><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li ><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li ><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
</ul>