Vytvorenie responzívnej galérie obrázkov s HTML a CSS

Úvod > Tipy a triky > Tvorba webstránok > Vytvorenie responzívnej galérie obrázkov s HTML a CSS

Úvod

V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke. Obrázkové galérie sú skvelé na prezentáciu portfólia, produktov alebo fotografií a dajú sa jednoducho vytvoriť pomocou HTML a CSS.

1. HTML štruktúra galérie

 <div class="galeria"> <img src="obrazok1.jpg" alt="Obrázok 1"> <img src="obrazok2.jpg" alt="Obrázok 2"> <img src="obrazok3.jpg" alt="Obrázok 3"> <img src="obrazok4.jpg" alt="Obrázok 4"> </div>

2. CSS štýly galérie

 .galeria { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.galeria img {
width: 200px;
height: auto;
border-radius: 8px;
transition: transform 0.3s;
}

.galeria img:hover {
transform: scale(1.05);
}

@media (max-width: 768px) {
.galeria {
flex-direction: column;
align-items: center;
}

.galeria img {
    width: 90%;
}


}

Záver

Táto galéria je jednoduchá, responzívna a atraktívna. Môžeš pridať ďalšie efekty alebo lightbox, aby si zlepšil interaktivitu a používateľskú skúsenosť na stránke.

Aktualizovaný:

Iné Články

a 19 ďaľších ...