CSS:Popup Image Viewer (Интересен начин да си направите галерия)
Ще ви покажа един интересен начин да си направите галерия.
Имаме една малка снимка сложена за линк, при ховер на снимката ще се показва голяма.

HTML

<a class="thumbnail" href="#"><img src="tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="tree.jpg" /></span></a>


сега имаме 2 картинки сложени като линк нищо сложно ;)

Сега с помоща на CSS ще направим необходимия ефект

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;

}

Какво направихме ?
В началото зададохме на малката картинка да се появява на заден фон при ховер ( .thumbnail:hover )
След тива с .thumbnail span направихме така че голямата картинка да е скрита преди тя да бъде маркирана от мишката.
И накрая с .thumbnail:hover span голамата снимка ще се появи при ховер на малката .






/ Трябва да сте регистриран за да напишете коментар /
От: WindowsXP
11:17 31-10-2009
Добра работа на автора. Обяснено е добре и се разбиар всичко. Може да се добавеи какво правят атрибутите .thumnbail span и .thumbnail hover за неуките :)
От: batmanabg
13:25 22-07-2011
Полезен урок.
1