Image Lightbox Component
A responsive Image Lightbox Component designed for e-commerce with a minimalist flat design style, supporting light and dark themes using Tailwind CSS.
HTML Code
<div class="relative inline-block cursor-pointer group">
<img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
<span class="text-white text-2xl font-semibold">View Image</span>
</div>
</div>
<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
<div class="relative w-full max-w-3xl">
<img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
</div>
</div>
<style>
/* Dark Mode Support */
.dark .bg-gray-900 { background-color: #1b1b1b; }
.dark .bg-black { background-color: #000; }
</style>Related Components
Image Lightbox Component for Job/Career Platforms
A clean, minimalist image lightbox component with a Swiss design influence and blue color scheme, suitable for job boards or career platforms. It supports responsiveness and dark mode, allowing users to view images in an overlaid popup.
Image Lightbox Component
Minimalist Image Lightbox Component with responsive design and dark theme support for Dashboard purposes. Uses picsum.photos for images.