css效果：鼠標滑過放大圖片

CSS樣式：

<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="p_w_picpath1" />Image1</a></li>
<li><a href="#"><img src="02.gif" alt="p_w_picpath2" />Image2</a></li>
<li><a href="#"><img src="03.gif" alt="p_w_picpath3" />Image3</a></li>
</ul>

 

• Image1
• Image2
• Image3