Componente Lightbox immagine
Un componente lightbox per immagini reattivo con un design piatto minimalista, una combinazione di colori monocromatica e una complessità moderata, adatto per le interfacce dei social media. Supporta un tema scuro utilizzando il prefisso dark: di Tailwind CSS e non richiede JavaScript. Le immagini provengono da picsum.photos.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Image 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 4 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 5 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 6 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
</div>
<!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
<div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
<div class="relative">
<img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white text-3xl">×</button>
</div>
</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.
Componente Lightbox immagine
Un componente lightbox per immagini semplice, reattivo e in stile glassmorphism con toni oceano/blu per i social media, che supporta la modalità scura.
Componente Lightbox immagine
Un componente lightbox per immagini reattivo progettato con lo stile Glassmorphism utilizzando Tailwind CSS. Il componente supporta un tema scuro con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura.