Componente Lightbox immagine
Componente lightbox immagine con design retrò / vintage, combinazione di colori analoga, complessità semplice, per scopi aziendali / aziendali. Reattivo con supporto per il tema scuro. HTML solo con Tailwind CSS.
Codice HTML
<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<!-- Image 1 -->
<div class="group relative">
<img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-bold">View Image</p>
</div>
</div>
<!-- Image 2 -->
<div class="group relative">
<img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-bold">View Image</p>
</div>
</div>
<!-- Image 3 -->
<div class="group relative">
<img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<p class="text-white text-lg font-bold">View Image</p>
</div>
</div>
<!-- Add more images as needed -->
</div>
</div>Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini complesso e reattivo con un design "ispirato alla carta/stampa", una combinazione di colori in tonalità gioiello e il supporto della modalità scura, adatto per piattaforme musicali/audio. Presenta ricchi elementi interattivi.
Cyberpunk_Real_Estate_Lightbox
Un componente lightbox per immagini semplice e reattivo con una combinazione di colori tenui ispirata al cyberpunk, adatto per gli annunci di proprietà immobiliari. Dispone di supporto per la modalità oscura e utilizza HTML semantico.
Componente Lightbox immagine
Un componente lightbox per immagini reattive progettato per le dashboard, caratterizzato da uno stile 3D e una combinazione di colori monocromatica. Include effetti al passaggio del mouse e funzionalità modali utilizzando Tailwind CSS per il supporto della modalità oscura.