玉楼春

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

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

• Image 1
• Image 2
• Image 3
• Image 4
• Image 5
• Image 6

上面是页面代码,下面就是最重要的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;",以及链接为什么是图片加文字，是因为可以更好的被搜索引擎收录吧

很简单有趣的CSS效果,呵呵