Фотогалерея на CSS

Купание черного коня
Африканская саванна
Тигренок с мамашей
На ловца и зверь бежит
Захмелел чегой-то я :)

HTML

<div id="container">
<br>
<a class="gallery slidea" href="zoo-photoalbum1.html">
<span>
<img src="img/001.jpg" alt="" title="Купание черного коня">
<br>
Купание черного коня
</span>
</a>
<a class="gallery slideb" href="zoo-photoalbum2.html">
<span>
<img src="img/002.jpg" alt="" title="Африканская саваннае">
<br>
Африканская саванна
</span>
</a>
<a class="gallery slidec" href="zoo-photoalbum3.html">
<span>
<img src="img/003.jpg" alt="" title="Тигренок с мамашей">
<br>
Тигренок с мамашей
</span>
</a>
<a class="gallery slided" href="zoo-photoalbum4.html">
<span>
<img src="img/004.jpg" alt="" title="На ловца и зверь бежит">
<br>
На ловца и зверь бежит
</span>
</a>
<a class="gallery slidee" href="zoo-photoalbum5.html">
<span><img src="img/005.jpg" alt="" title="Захмелел чегой-то я :)">
<br>
Захмелел чегой-то я :)
</span>
</a>
</div>

CSS

#container {position:relative; width:600px; height:410px; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute;
bottom:100px; left:0; color:#eee; font-family:tahoma, geneva, verdana, sans-serif;
letter-spacing:1px; line-height:1.7em; z-index:1;}
a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none;
border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px;
position:relative; cursor:default;}
/* --- фотки начало -- */
a.slidea {background:url(img/01.jpg);}
a.slideb {background:url(img/02.jpg);}
a.slidec {background:url(img/03.jpg);}
a.slided {background:url(img/04.jpg);}
a.slidee {background:url(img/05.jpg);}
/* --- фотки конец -- */
a.gallery span {visibility:hidden; display:block; position:absolute;
width:580px; height:320px; top:29px; left:9px; color:#000;
text-align:center; font-family:tahoma, geneva, verdana, sans-serif;
letter-spacing:1px; cursor:default;}
/* --- отступы начало -- */
a.slidea span {left:-13px; top:80px;}
a.slideb span {left:-132px; top:80px;}
a.slidec span {left:-251px; top:80px;}
a.slided span {left:-370px; top:80px;}
a.slidee span {left:-489px; top:80px;}
/* --- отступы конец -- */
a.gallery:hover {white-space:normal; border:1px solid #ff0000; z-index:100;}
a.gallery:hover span {visibility:visible; z-index:100;}
a.gallery:hover span img {margin:10px; border : 3px double #697357;
position:relative; z-index:100;}
a.gallery:active, a.gallery:focus { z-index:10;}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.gallery:active span img, a.gallery:focus span img {border:1px solid #000;
position:relative; margin:10px; z-index:10;}

Скачать фотогалерею, размер архива 13.7 кБ