Gallery Block Generator

Twórz estetyczne galerie zdjęć z zaawansowanymi opcjami.

Ustawienia Galerii

Obraz #1

URL Obrazu

Tekst alternatywny (ALT)

Tytuł

Opis

Obraz #2

URL Obrazu

Tekst alternatywny (ALT)

Tytuł

Opis

Obraz #3

URL Obrazu

Tekst alternatywny (ALT)

Tytuł

Opis

Obraz #4

URL Obrazu

Tekst alternatywny (ALT)

Tytuł

Opis

Tryb Galerii

Kolumny (3)

Odstępy (16px)

Proporcje obrazów

Zaokrąglenie (12px)

Cień

Maksymalna szerokość (1200px)

Podgląd – Galeria

Tak będzie wyglądał Twój blok z galerią zdjęć.

Wygenerowany HTML Galerii


<style>
    #fc-gallery-4m9r2dh {
        display: block;
        max-width: 1200px;
        margin: 0 auto;
        font-family: sans-serif;
    }
    #fc-gallery-4m9r2dh .fc-gallery-item {
        display: block;
        overflow: hidden;
        position: relative;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.10);
        aspect-ratio: auto;
    }
    #fc-gallery-4m9r2dh .fc-gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        cursor: zoom-in;
    }
    #fc-gallery-4m9r2dh .fc-gallery-item:hover img {
        transform: scale(1.05);
    }
    #fc-gallery-4m9r2dh .fc-gallery-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        color: white;
        pointer-events: none;
    }
     #fc-gallery-4m9r2dh .fc-gallery-caption h4 {
        margin: 0 0 0.25rem 0;
        font-size: 1.1rem;
        font-weight: 600;
     }
     #fc-gallery-4m9r2dh .fc-gallery-caption p {
        margin: 0;
        font-size: 0.9rem;
        opacity: 0.9;
     }
</style>
    

<div id="fc-gallery-4m9r2dh" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
    
        <div class="fc-gallery-item">
            <img src="https://picsum.photos/seed/1/800/600" alt="Placeholder 1" class="stylized-frame" loading="lazy" title="Tytuł obrazka 1">
            
            <div class="fc-gallery-caption">
                <h4>Tytuł obrazka 1</h4>
                <p>Krótki opis pierwszego zdjęcia.</p>
            </div>
        </div>
    
        <div class="fc-gallery-item">
            <img src="https://picsum.photos/seed/2/800/600" alt="Placeholder 2" class="stylized-frame" loading="lazy" title="Tytuł obrazka 2">
            
            <div class="fc-gallery-caption">
                <h4>Tytuł obrazka 2</h4>
                <p>Krótki opis drugiego zdjęcia.</p>
            </div>
        </div>
    
        <div class="fc-gallery-item">
            <img src="https://picsum.photos/seed/3/600/800" alt="Placeholder 3" class="stylized-frame" loading="lazy" title="Tytuł obrazka 3">
            
            <div class="fc-gallery-caption">
                <h4>Tytuł obrazka 3</h4>
                <p>Krótki opis trzeciego zdjęcia.</p>
            </div>
        </div>
    
        <div class="fc-gallery-item">
            <img src="https://picsum.photos/seed/4/800/600" alt="Placeholder 4" class="stylized-frame" loading="lazy" title="Tytuł obrazka 4">
            
            <div class="fc-gallery-caption">
                <h4>Tytuł obrazka 4</h4>
                <p>Krótki opis czwartego zdjęcia.</p>
            </div>
        </div>
    
</div>

Obrazy

Układ i Styl