Componente Lightbox Retro Image
Un componente Lightbox per immagini semplice e reattivo con design retrò/vintage, combinazione di colori analoga e supporto per la modalità scura, adatto per blog e siti di contenuti.
Codice HTML
<
div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
<
div
class="relative group cursor-pointer"
onclick="this.querySelector('.lightbox').classList.remove('hidden')"
>
<
img
src="https://picsum.photos/seed/retro1/500/300"
alt="Retro Image 1"
class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
>
<
div
class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
onclick="event.stopPropagation(); this.classList.add('hidden')"
>
<
img
src="https://picsum.photos/seed/retro1/800/600"
alt="Retro Image 1 Enlarged"
class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
>
<
/div
>
<
div
class="relative group cursor-pointer"
onclick="this.querySelector('.lightbox').classList.remove('hidden')"
>
<
img
src="https://picsum.photos/seed/retro2/500/300"
alt="Retro Image 2"
class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
>
<
div
class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
onclick="event.stopPropagation(); this.classList.add('hidden')"
>
<
img
src="https://picsum.photos/seed/retro2/800/600"
alt="Retro Image 2 Enlarged"
class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
>
<
/div
>
<
div
class="relative group cursor-pointer"
onclick="this.querySelector('.lightbox').classList.remove('hidden')"
>
<
img
src="https://picsum.photos/seed/retro3/500/300"
alt="Retro Image 3"
class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
>
<
div
class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
onclick="event.stopPropagation(); this.classList.add('hidden')"
>
<
img
src="https://picsum.photos/seed/retro3/800/600"
alt="Retro Image 3 Enlarged"
class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
>
<
/div
>
<
/div
>Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini reattive con un tema retrò/vintage che utilizza Tailwind CSS, supporta la modalità oscura e presenta immagini segnaposto.
Componente Lightbox immagine
Un componente Image Lightbox reattivo progettato in stile Material Design, con una combinazione di colori triadica e supporto per la modalità scura. È adatto per il portfolio che mostra lavori o prodotti.
Componente Lightbox immagine
Un componente Image Lightbox reattivo progettato per l'e-commerce, con supporto per la modalità scura e una combinazione di colori dei toni della terra.