Lightbox

Single Image Lightbox

    
    
    <div class="flex gap-4"> 
        <a href="assets/img/card/card-01.jpg" class="image-popup">
            <img src="assets/img/card/card-01.jpg" alt="image" class="h-full">
        </a>
        <a href="assets/img/card/card-02.jpg" class="image-popup">
            <img src="assets/img/card/card-02.jpg" alt="image" class="h-full">
        </a>
        <a href="assets/img/card/card-03.jpg" class="image-popup">
            <img src="assets/img/card/card-03.jpg" alt="image" class="h-full">
        </a>
    </div>

Image with Description

    
    
    <div class="flex gap-4"> 
        <a href="assets/img/card/card-04.jpg" class="image-popup-desc" data-title="Title 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
            <img src="assets/img/card/card-04.jpg" class="img-fluid" alt="work-thumbnail">
        </a>
        <a href="assets/img/card/card-05.jpg" class="image-popup-desc" data-title="Title 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
            <img src="assets/img/card/card-05.jpg" class="img-fluid" alt="work-thumbnail">
        </a>
        <a href="assets/img/card/card-06.jpg" class="image-popup-desc" data-title="Title 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
            <img src="assets/img/card/card-06.jpg" class="img-fluid" alt="work-thumbnail">
        </a>
    </div>