这部分的思路可以说全部秉承《a:hover应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。
它的结构层与《a:hover应用精粹》的后三个示范出奇的相似。CSS也足够强大地表达出我们想要新效果。
<ul id="album">
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" />
<span>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" />
</span>
</a>
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" />
<span>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" />
</span>
</a>
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" />
<span>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" />
</span>
</a>
</li>
//**************略*********
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" />
<span>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" />
</span>
</a>
</li>
</ul>
用到的图片比较多，但结构我们应该很熟悉。一共32张，其实只是16张，每张重复使用2次（大图与小图）。我们要做的出效果，图片分析4行排列，每行4张，鼠标移到小图上面，对应的大图会在小图左上方出现，并遮住小图。实现思路是，限制UL元素的大小，并且LI元素全部左浮动。大图我们一开始就隐藏起来，当移动到小图上时，我们显示大图，并用绝对定位设置大图的位置，包含块设在A元素上。
ul#album, #album li{
margin:0;
padding:0;
list-style:none;
}
ul#album{/*第1层*/
400px;
height:300px;
}
#album img {
border:none;/*默认存在边框，为了精确控制，我们清除它*/
display:block;/*li img下方多出5px空白bug*/
100px;/*默认平时都以小图形式显示*/
height:75px;
}
#album li{/*第2层*/
float:left;/*用于平行排列与换行*/
}
#album span {
display:none;/*平时隐藏大图*/
}
#album a:hover {
position:relative;
}
#album a:hover span{/*第3层*/
display:block;
position:absolute;
left:-50px;/*左移距离为小图的宽的一半*/
top:-37px;/*上移距离为小图的高的一半*/
}
#album a:hover span img{
200px;/*我们原图实现太大了，所以也要缩小一下*/
height:150px;
}
但需要的图片太多了，换言之，请求数也很多，这对服务器的压力很大，有没有办法砍掉一些呢？？能！因为我们可以通过hover切换相应图片的大小，就不需要span那一部分了。于是结构层更简单。
<ul id="album">
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
</a>
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
</a>
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
</a>
</li>
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
</a>
</li>
//****************略************
<li>
<a href="http://www.cnblogs.com/rubylouvre/">
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
</a>
</li>
</ul>
ul#album, #album li{
margin:0;
padding:0;
list-style:none;
}
ul#album{/*第1层*/
400px;
height:300px;
}
#album li{/*第2层*/
float:left;
100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
}
#album img{
border:none;/*默认存在边框，为了精确控制，我们清除它*/
display:block;/*li img下方多出5px空白bug*/
100px;/*默认平时都以小图形式显示*/
height:75px;
}
#album a:hover {
position:relative;/*成为包含块*/
}
#album a:hover img{/*只有由hover激活的img才位于第3层*/
position:absolute;
left:-50px;/*上移小图的宽的一半*/
top:-37px;/*上移小图的高的一半*/
200px;
height:150px;
}
这次竟然发现在chrome出现问题，症状是大图总是出现第一幅小图之上，而不是我们鼠标指向那个小图上。留意我们的小图其实位于A元素上，而A元素为大图的包含块。不过A元素好像什么也没有设置，我们给点东西A做延缓A的渲染速度，可能chrome做了过多的内部优化……在样式中添加：
/*[修复chrome绝对定位错乱Bug*/
#album li a{
display:block;/*让具有盒子模型*/
100px;
height:75px;
}
/*******完*****]*/