<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META NAME="Author" CONTENT="hhshushu" />
<META NAME="Keywords" CONTENT="纯CSS图片放大效果" />
<META NAME="Description" CONTENT="纯CSS图片放大效果" />
<title>纯CSS图片放大效果</title>
<style type="text/css" title="">
body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;}
#main-content{border:5px solid #7bc809;padding:5px;background:#fff ;}
ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/}
li{display:inline;}
li a{position:relative;}
li a:hover{position:relative;border:none;z-index:1000;}/*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/
li a img{width:100px;height:100px;border:none;position:absolute;}/*使用绝对定位让图片固定从而脱离页面流*/
li a:hover img{position: absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;} /*注意这里的z-index显示设置，否则会有重叠*/
li#pic-01 a img{top:0;left:0;}
li#pic-02 a img{top:0;left:100px;}
li#pic-03 a img{top:0;left:200px;}
li#pic-04 a img{top:100px;left:0;}
li#pic-05 a img{top:100px;left:100px;}
li#pic-06 a img{top:100px;left:200px;}
li#pic-07 a img{top:200px;left:0px;}
li#pic-08 a img{top:200px;left:100px;}
li#pic-09 a img{top:200px;left:200px;}
/*定位图片的排布*/
</style>
</head>
<body>
<div id="main-content" >
<ul>
<li id="pic-01"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图1" /></a></li>
<li id="pic-02"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图2" /></a></li>
<li id="pic-03"><a href="http://home.blueidea.com/apps.php?do=case&ac=lists&uid=560226&picid=68256"><img src="http://home.blueidea.com/attachment/201102/24/560226_12985459674K0h_t.jpg" alt="图3" /></a></li>
<li id="pic-04"><a href="#"><img src="#" alt="图4" /></a></li>
<li id="pic-05"><a href="#"><img src="#" alt="图5" /></a></li>
<li id="pic-06"><a href="#"><img src="#" alt="图6" /></a></li>
<li id="pic-07"><a href="#"><img src="#" alt="图7" /></a></li>
<li id="pic-08"><a href="#"><img src="#" alt="图8" /></a></li>
<li id="pic-09"><a href="#"><img src="#" alt="图8" /></a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META NAME="Author" CONTENT="hhshushu" />
<META NAME="Keywords" CONTENT="纯CSS图片放大效果" />
<META NAME="Description" CONTENT="纯CSS图片放大效果" />
<title>纯CSS图片放大效果</title>
<style type="text/css" title="">
body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;}
#main-content{border:5px solid #7bc809;padding:5px;background:#fff ;}
ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/}
li{display:inline;}
li a{position:relative;}
li a:hover{position:relative;border:none;z-index:1000;}/*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/
li a img{width:100px;height:100px;border:none;position:absolute;}/*使用绝对定位让图片固定从而脱离页面流*/
li a:hover img{position: absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;} /*注意这里的z-index显示设置，否则会有重叠*/
li#pic-01 a img{top:0;left:0;}
li#pic-02 a img{top:0;left:100px;}
li#pic-03 a img{top:0;left:200px;}
li#pic-04 a img{top:100px;left:0;}
li#pic-05 a img{top:100px;left:100px;}
li#pic-06 a img{top:100px;left:200px;}
li#pic-07 a img{top:200px;left:0px;}
li#pic-08 a img{top:200px;left:100px;}
li#pic-09 a img{top:200px;left:200px;}
/*定位图片的排布*/
</style>
</head>
<body>
<div id="main-content" >
<ul>
<li id="pic-01"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图1" /></a></li>
<li id="pic-02"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图2" /></a></li>
<li id="pic-03"><a href="http://home.blueidea.com/apps.php?do=case&ac=lists&uid=560226&picid=68256"><img src="http://home.blueidea.com/attachment/201102/24/560226_12985459674K0h_t.jpg" alt="图3" /></a></li>
<li id="pic-04"><a href="#"><img src="#" alt="图4" /></a></li>
<li id="pic-05"><a href="#"><img src="#" alt="图5" /></a></li>
<li id="pic-06"><a href="#"><img src="#" alt="图6" /></a></li>
<li id="pic-07"><a href="#"><img src="#" alt="图7" /></a></li>
<li id="pic-08"><a href="#"><img src="#" alt="图8" /></a></li>
<li id="pic-09"><a href="#"><img src="#" alt="图8" /></a></li>
</ul>
</div>
</body>
</html>