本效果其实实现的非常简单也非常巧妙，只是利用了hover来控制大图片的显示，但是非常有效，简单而使用。
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<style type="text/css">
a, a:visited, a:hover {color:#000;}
#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}
#container a.pics {float:left; margin:7px 21px; display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:0;}
#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}
#container a.pics:hover {white-space:normal; border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}
#container a.pics:active {border:1px solid #fc0;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}
#container a.pics:focus {border:1px solid #fc0; outline:0;}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0;}
#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}
</style>
在网页<body>区添加以下代码
<div id="container"> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/sph1.jpg" alt="" /> <span><img src="images/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/sph2.jpg" alt="" /> <span><img src="images/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/sph3.jpg" alt="" /> <span><img src="images/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/sph4.jpg" alt="" /> <span><img src="images/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/sph5.jpg" alt="" /> <span><img src="images/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/spv1.jpg" alt="" /> <span><img src="images/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/spv2.jpg" alt="" /> <span><img src="images/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/spv3.jpg" alt="" /> <span><img src="images/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/spv4.jpg" alt="" /> <span><img src="images/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span> </a> <a class="pics" href="http://www.sharejs.com"><img class="thumb" src="images/spv5.jpg" alt="" /> <span><img src="images/simonv5.jpg" alt="The Pose" title="The Pose" /><b><br />The Pose</b></span> </a> <span class="info">Photographs<br />by kind permission of<br /><a href="http://www.sharejs.com/">sharejs.com</a></span> </div>
