Gallery Component
A responsive gallery component with a 3D design style, featuring depth and engagement through shadow and hover effects. It supports dark and light themes.
HTML Code
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Gallery Item 1" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 1</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Gallery Item 2" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 2</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Gallery Item 3" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 3</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=4" alt="Gallery Item 4" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 4</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=5" alt="Gallery Item 5" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 5</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=6" alt="Gallery Item 6" class="w-full h-auto rounded-lg" />
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white font-semibold text-lg">Gallery Item 6</span>
</div>
</div>
</div>
</div>
<style>
.dark { background-color: #1a202c; }
.dark .text-gray-900 { color: white; }
</style>Related Components
E-commerce Product Gallery
A minimalist and responsive product gallery component for e-commerce, featuring ocean/blue tones, dark mode support, and interactive image display.
3D Gallery Component
A complex responsive 3D gallery component designed for e-commerce, featuring a dark theme and a complementary color scheme.
JewelTone_Photography_Gallery
A complex, responsive photography gallery component with jewel tone colors and a clean, typographic layout, featuring grid systems and dark mode support. Ideal for photographer portfolios.