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 голамата снимка ще се появи при ховер на малката .