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
A complex Image Lightbox Component designed in a Brutalist style, suitable for social media interfaces, featuring a grayscale color scheme and high contrast for dark mode support.
Image Lightbox Component
A responsive image lightbox component with dark mode support. This component displays a gallery of images, and clicking on an image opens a full-screen modal with navigation arrows to browse through the images. It features a close button and uses vibrant colors for highlighting interactive elements. The design is tailored for a business/corporate context, ensuring a professional yet engaging user experience.
Image Lightbox Component
A responsive Image Lightbox component designed with 3D elements, vibrant colors and moderate complexity for business/corporate websites. It supports dark mode styling using Tailwind CSS.