Componente Galleria
Componente Galleria reattiva con supporto per la modalità oscura
Codice HTML
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Gallery Item 1 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 1</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 2</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 3</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 4</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 5</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="relative overflow-hidden rounded-lg shadow-lg group">
<img src="https://picsum.photos/600/400?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p class="text-white text-xl font-semibold">Project Title 6</p>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Galleria Moda/Bellezza Corporate/Professionale
Un componente della galleria di immagini pulito, affidabile e reattivo, adatto ai marchi di moda e bellezza aziendali, con una combinazione di colori triadica e il supporto della modalità scura.
Componente Galleria Corporate/Professionale
Un componente di galleria di immagini reattivo e versatile con un'estetica aziendale/professionale, che utilizza una tavolozza di colori foresta/verde. Progettato per le piattaforme educative, fornisce un'interfaccia pulita e affidabile con supporto per la modalità oscura.
Galleria prodotti e-commerce
Un componente minimalista e reattivo per la galleria di prodotti per l'e-commerce, con toni oceano/blu, supporto per la modalità scura e visualizzazione interattiva delle immagini.