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 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.
Image Lightbox Component
A responsive image lightbox component with Neumorphism design style and dark theme support using Tailwind CSS.
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.