Galeria CSS

 Prosta galeria zdjęć wyświetlana za pomocą CSS.

Przykład działania galerii CSS

Kod HTML:

<div class="galeria">
<div class="miniatury">
<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns"></div></div>
<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns1"></div></div>
<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns2"></div></div>
<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns3"></div></div>
<div class="male-foto"><img src="img/obrazek.jpg" alt="" /><div class="duze-foto nuns4"></div></div>
</div>
</div>

CSS:

.galeria

{

padding-top: 470px; /* tu ustawiamy miejsce na duże zdjęcie. Po najeździe tu pojawi się span */

position: relative; /* nasz span będzie się pozycjonował względem tego elementu bo jako ostatni ma position inne od static*/
left:40px;
}
.miniatury

{
padding-left: 35px; /* Tylko wygląd */
display:block;
}
.miniatury > div

{
float:left;
padding-right: 5px; /* Tylko wygląd */
padding-bottom:5px;
}
.miniatury > div > div
{
position: absolute; /* pozycjonujemy */
left: 80px; /* w lewy */
top: 0; /* górny róg diva .galeria */
display: none; /* normlanie span jest ukryty */
width: 505px; /* jakas szerokosc */
height: 450px; /* jakas wyskosc */
}
.miniatury > div:hover img

{
 background-color: #999; /* Tylko wygląd */
}
.miniatury > div:hover > div

{
display: block; /* kiedy nadrzędny span jest hoverowany, pokazujemy naszego spana z duzym zdjeciem */
}
div.nuns

{
background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
div.nuns1

{
background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
div.nuns2

{
background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
div.nuns3

{
background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
}
div.nuns4

{
background: transparent url(img/obrazek.jpg) 50% 50% no-repeat; /* ustawienie dużego zdjęcia */
} 

Galeria zachomikowana z jednego z istniejących w sieci blogów.