滑鼠移到圖片上有放大的效果

 

<style type="text/css">
<!--
#enlarge {...}{
list-style-type:none;
} 
#enlarge li {...}{
display:block; 
float:left; 
margin:20px; 
width:22px; height:18px; 
position:relative;
} 
#enlarge li a {...}{
display:block; 
width:22px; height:18px; 
overflow:hidden; 
position:relative;
} 
#enlarge li a img {...}{
width:100%; height:100%; 
border:0;
} 
#enlarge li a:hover {...}{
position:absolute; 
left:-20px; 
top:-20px; 
width:80px; height:80px; 
}
-->
</style>
<ul id="enlarge"> 
<li><a href="#"><img src="01.gif" alt="image1" />Image1</a></li> 
<li><a href="#"><img src="02.gif" alt="image2" />Image2</a></li> 
<li><a href="#"><img src="03.gif" alt="image3" />Image3</a></li> 
</ul>


第10行和第15行 : 原始圖片的大小尺寸
第27行 : 放大圖片尺寸