Skeuomorphic Image Lightbox
A responsive image lightbox component with a skeuomorphic grayscale design for portfolios, supporting dark mode.
HTML Code
<div class="p-4 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Lightbox Item 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/600/400?random=1" alt="Portfolio Image 1" class="w-full h-64 object-cover rounded-lg shadow-xl
transform transition-transform duration-300 group-hover:scale-105
border-4 border-gray-300 dark:border-gray-700
group-hover:border-gray-500 dark:group-hover:border-gray-400">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100
flex items-center justify-center transition-opacity duration-300 rounded-lg
border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
<p class="text-white text-lg font-bold">View Project</p>
</div>
</div>
<!-- Lightbox Item 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/600/400?random=2" alt="Portfolio Image 2" class="w-full h-64 object-cover rounded-lg shadow-xl
transform transition-transform duration-300 group-hover:scale-105
border-4 border-gray-300 dark:border-gray-700
group-hover:border-gray-500 dark:group-hover:border-gray-400">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100
flex items-center justify-center transition-opacity duration-300 rounded-lg
border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
<p class="text-white text-lg font-bold">View Project</p>
</div>
</div>
<!-- Lightbox Item 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/600/400?random=3" alt="Portfolio Image 3" class="w-full h-64 object-cover rounded-lg shadow-xl
transform transition-transform duration-300 group-hover:scale-105
border-4 border-gray-300 dark:border-gray-700
group-hover:border-gray-500 dark:group-hover:border-gray-400">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100
flex items-center justify-center transition-opacity duration-300 rounded-lg
border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
<p class="text-white text-lg font-bold">View Project</p>
</div>
</div>
<!-- Add more lightbox items as needed -->
</div>
</div>
Related Components
Image Lightbox Component
A complex Image Lightbox component designed with skeuomorphic elements and a pastel color scheme, suitable for dashboard environments. It includes a responsive layout, dark theme support, and an interactive interface.
Image Lightbox Component
A responsive image lightbox component designed in dark mode using Tailwind CSS. It features a dark background, opacity effects, and responsive designs to accommodate various screen sizes.
Image Lightbox Component - Skeuomorphic Purple
A simple, responsive image lightbox component with a skeuomorphic design in the purple/violet spectrum, suitable for job/career platforms. Includes dark mode support.