Фотоальбом на css
Фотоальбом на css |
|
Для просмотра фотографий из альбома наводите курсор на картинку
HTML
-----------------------------------<div id="container">
<a class="gallery slidea" href="#"><span><img src="im/001.jpg" alt="" title="Я с Ильей"><br>Я с Ильей</span></a>
<a class="gallery slideb" href="#"><span><img src="im/002.jpg" alt="" title="Я в платке"><br>Я в платке</span></a>
<a class="gallery slidec" href="#"><span><img src="im/003.jpg" alt="" title="На озере"><br>На озере</span></a>
<a class="gallery slided" href="#"><span><img src="im/004.jpg" alt="" title="С друзьями"><br>С друзьями</span></a>
<a class="gallery slidee" href="#"><span><img src="im/005.jpg" alt="" title="С Марией"><br>С Марией</span></a>
</div>
CSS
-----------------------------------#container {width:600px;margin : 0;padding : 0; }
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(im/01.jpg);}
a.slideb {background:url(im/02.jpg);}
a.slidec {background:url(im/03.jpg);}
a.slided {background:url(im/04.jpg);}
a.slidee {background:url(im/05.jpg);}
a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:320px; top:29px; left:9px; color:#000; text-align:center; border:0px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",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 #fff; z-index:100;}
a.gallery:hover span {visibility:visible; z-index:100;}
a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}
a.gallery:active, a.gallery:focus {border:1px solid #c00; 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;}
Вернуться на страницу "Рецепты CSS"
