html


<div class="container gallery-container">

            <h1>skladanie mebli na lanach</h1>


            <div class="tz-gallery">

                <div class="row">
                        <a class="lightbox" href="1.jpg">
                            <img src="miniaturki/1_small.jpg" alt="Park">
                        </a>


                        <a class="lightbox" href="2.jpg">
                            <img src="miniaturki/2_small.jpg" alt="Bridge">
                        </a>


                        <a class="lightbox" href="3.jpg">
                            <img src="miniaturki/3_small.jpg" alt="Tunnel">
                        </a>


                        <a class="lightbox" href="4.jpg">
                            <img src="miniaturki/4_small.jpg" alt="Coast">
                        </a>

                        <a class="lightbox" href="5.jpg">
                            <img src="miniaturki/5_small.jpg" alt="Traffic">
                        </a>

                </div>
            </div>
        </div>



CSS

.gallery-container h1 {
    text-align: center;
    margin-top: 80px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}





.tz-gallery {
    float: left;
    width: 20%;
    margin-right: 0.2;
    margin-bottom: 0.2;
    padding: 40px;
}

.tz-gallery .lightbox img {
    width: 100%;
    margin-bottom: 30px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}


.tz-gallery .lightbox img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.tz-gallery img {
    border-radius: 4px;
}

.baguetteBox-button {
    background-color: transparent !important;
}