Single Image Lightbox
<div class="flex gap-4">
<a href="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-01.jpg" class="image-popup">
<img src="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-01.jpg" alt="image" class="h-full">
</a>
<a href="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-02.jpg" class="image-popup">
<img src="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-02.jpg" alt="image" class="h-full">
</a>
<a href="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-03.jpg" class="image-popup">
<img src="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-03.jpg" alt="image" class="h-full">
</a>
</div>
Image with Description
<div class="flex gap-4">
<a href="https://dreamsiot.dreamstechnologies.com/laravel/public/build/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="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-04.jpg" class="img-fluid" alt="work-thumbnail">
</a>
<a href="https://dreamsiot.dreamstechnologies.com/laravel/public/build/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="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-05.jpg" class="img-fluid" alt="work-thumbnail">
</a>
<a href="https://dreamsiot.dreamstechnologies.com/laravel/public/build/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="https://dreamsiot.dreamstechnologies.com/laravel/public/build/img/card/card-06.jpg" class="img-fluid" alt="work-thumbnail">
</a>
</div>
ENG
ARB
GER
