实现原理
这个效果的原理很简单，利用:hover伪类，然后利用display控制内容的隐藏和显示，显示的内容采用position定位到你想要的位置就可以了。
从一个简单的例子中看看具体怎么实现的
这里是例子代码
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>css相册原理</title>
<style type=”text/css“>
a span {display:none;}
a:hover {background:#fff;}
a:hover span { position:absolute; top:0px; right:0px; display:block; width:150px;font-size:150px; font-weight:bold;}
</style>
</head>
<body>
<a href=”#”>gallery<span>gallery</span></a>
</body>
</html>
默认情况下span的状态是display:none;不现实的，当鼠标滑过的时候
span定位到右上角，而且字体放大了
IE bug
当<a>中元素采用position的时候，需要加一个背景来表明<a>的控制范围，否则鼠标滑过没有任何效果。
关于:hover
:hover是W3C CSS2.1规范中的伪类，所以对W3C标准支持比较好的浏览器如Firfox1.5+，Opera7.0+，IE7都支持。IE7.0一下的版本只有通过
a:hover才能使用。
同类的效果也很多，下面的列表是我整理的一些相关效果
先看看我做的效果
实现的步骤
1.基本的文档结构
分析一下相册肯定属于列表，根据语义化的原则，我们采用列表来装载图片列表，我采用的是ul无序列表,嵌套两层当然你要准备几张图片包括缩略图和原图，我在自己电脑上找到了几张Avril Lavigne的壁纸,查看效果。
<li class=”galllist”><a href=”#nogo”><img class=”thumb” src=”/UploadPic/2007-4/200741152012124.jpg” alt=”Avril Lavigne01″
/>
<ul class=”detail”>
<li>pic name</li>
<li><img src=”/UploadPic/2007-4/200741152013280.jpg” alt=”Avril Lavigne01″ /></li>
<li>pubtime</li>
</ul></a>
</li>
</ul>
<ul id=”gallery”>为相册的主体，<li class=”galllist”>是缩略图列表，<ul class=”detail”>相册详细信息展示。
2.运用CSS实现单个图片的效果
a img { border:0;} /* 清除元素默认的图片边框 */
li { list-style:none;} /* 清除项目符号 */
#gallery a:hover { background:#fff;} /* IE bug 解决 */
#gallery .detail { display:none;} /* 默认隐藏 */
/* less than and IE6.0 */
/* 低于IE6.0和IE6.0下 定位详细信息和显示 */
#gallery a:hover .detail {display:block; width:210px; position:absolute; top:5px; left:280px;}
/* IE7 FF Opera*/
/* 其他的浏览器 直接用:hover伪类， 定位详细信息和显示 */
#gallery li:hover .detail {display:block; width:210px; position:absolute; top:5px; left:280px;}
注释里面已经说得很清楚怎么实现单一图片效果的。
3.完整的XHTML结构
一个相册起码应该有个默认的图片展示，我把第一个图片设置为默认显示的
<ul class=”detail” id=”default”>
浮动的相册列表<li class=”galllist”>我采用class=”clearfix”来清楚，具体CSS代码会在下面展示，在加个标题
下面是完整的文档结构
<div id=”container”>
<ul id=”gallery” class=”clearfix”>
<li class=”galllist”><a href=”#nogo”><img class=”thumb” src=”/UploadPic/2007-4/200741152013238.jpg” alt=”Avril Lavigne01″
/>
<ul class=”detail” id=”default”>
<li>Avril Lavigne01</li>
<li><img src=”/UploadPic/2007-4/200741152013280.jpg” alt=”Avril Lavigne01″ /></li>
<li>2006-10-30</li>
</ul>
</a>
</li>
……
<li class=”galllist”><a href=”#nogo”><img class=”thumb” src=”/UploadPic/2007-4/200741152014816.jpg” alt=”Avril Lavigne n”
/>
<ul class=”detail”>
<li>Avril Lavigne n</li>
<li><img src=”/UploadPic/2007-4/200741152014603.jpg” alt=”Avril Lavigne n” /></li>
<li>2006-10-30</li>
</ul>
</a>
</li>
</ul>
</div>
</body>
</html>
4.完整的CSS
这段代码里面介绍一下默认图片展示的CSS，利用z-index值把第一张图片设置为默认图片，而且当看到其他图片的时候，会覆盖他
#gallery ul#default { display:block; width:210px; position:absolute; top:5px; left:280px; z-index:1;}
/* 其他图片 */
/* less than and IE6.0 */
#gallery a:hover .detail {display:block; width:210px; position:absolute; top:5px; left:280px; z-index:10;}
/* IE7 FF Opera*/
#gallery li:hover .detail {display:block; width:210px; position:absolute; top:5px; left:280px; z-index:10;}
下面是完整的CSS
/* main styles */
* { margin:0; padding:0;}
body { text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em;}
a { color:#fff; text-decoration:none; font-weight:bold;}
a:hover{ color:#fff; text-decoration:none;}
a img { border:0;}
li { list-style:none;}
/* detail styles*/
#container { position:relative; width:500px; height:25em; margin:0 auto; background:#fafafa; border:6px #eee solid;}
#gallery {width:192px; padding:4px; float:left; position:relative; top:5px; left:5px; text-align:left;
background:#fff; border:1px #eee solid; height:120px;}
#gallery a:hover { cursor:help; background:#fff; /* this is a IE bug */ }
html>body #gallery a:hover { background:none;}
#gallery ul.detail {display:none; background:#fafafa;}
/* not for IE */
html>body #gallery a ul.detail {display:none;}
/* gallery list */
.galllist { float:left;}
.thumb { margin:2px; padding:1px; border:1px #ccc solid;}
a:hover .thumb {border:1px #f60 solid; }
/* less than and IE6.0 */
#gallery a:hover .detail {display:block; width:210px; position:absolute; top:5px; left:280px; z-index:10;}
/* IE7 FF Opera*/
#gallery li:hover .detail {display:block; width:210px; position:absolute; top:5px; left:280px; z-index:10;}
#gallery ul#default { display:block; width:210px; position:absolute; top:5px; left:280px; z-index:1;}
.detail li { padding:0px; border:1px #f90 solid; text-align:center; margin:4px; background:#f60; padding:4px 0; font
-size:11px;}
.detail li img { vertical-align:middle; width:200px; max-width:200px;}
/* close float */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac /*/
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
5.制作完成总结
实现原理也提到了，具体做法也讲了，相信你一会就能利用CSS做出更加绚丽的相册出来。当然更加完美的效果过还是通过JavaScript，更甚者AJAX来实现。
16:01 2006-11-25更新
增加鼠标激活效果，当鼠标点击某个小缩略图后，展示大图
