CSS鼠标经过时图片放大

更新时间：2007-12-16参与评论

先看看效果
示例来源于:http://www.cssplay.co.uk/menus/magnifier2.html

整个菜单6张图片,当hover状态也就是鼠标经过的时候,当前图片放大,可以遮住后面的图片,看到这里,就有了一点想法,整个过程全部由CSS来控制，先来看看页面的代码

插入代码：

<ul id="enlarge">
<li><a href="#one"><img src="lines/image1.gif" alt="image 1" title="image 1" />Image 1</a></li>
<li><a href="#two"><img src="lines/image2.gif" alt="image 2" title="image 2" />Image 2</a></li>
<li><a href="#three"><img src="lines/image3.gif" alt="image 3" title="image 3" />Image 3</a></li>
<li><a href="#four"><img src="lines/image4.gif" alt="image 4" title="image 4" />Image 4</a></li>
<li><a href="#five"><img src="lines/image5.gif" alt="image 5" title="image 5" />Image 5</a></li>
<li><a href="#six"><img src="lines/image6.gif" alt="image 6" title="image 6" />Image 6</a></li>
</ul>

上面是页面代码,下面就是最重要的CSS了
插入代码：

#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent; 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; z-index:100;}

呵呵,看了CSS以后恍然大悟,运用"left:-20px; top:-20px"配合hover状态的"position:absolute",然后控制图片放大
至于#enlarge li a里为什么有"overflow:hidden;",以及链接为什么是图片加文字，是因为可以更好的被搜索引擎收录吧