Componenti Immagine Lightbox Componente Lightbox immagine

Componente Lightbox immagine

Un complesso componente Image Lightbox progettato con elementi scheumorfici e una combinazione di colori pastello, adatto per gli ambienti dashboard. Include un layout reattivo, supporto per temi scuri e un'interfaccia interattiva.

Anteprima

Codice HTML

<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-75 dark:bg-black">
    <div class="bg-gradient-to-br from-pink-300 to-blue-300 rounded-xl shadow-xl p-5 w-full max-w-3xl relative">
        <button class="absolute top-2 right-2 text-gray-700 dark:text-gray-300 font-bold text-lg hover:text-gray-900 dark:hover:text-white transition">
            &times;
        </button>
        <div class="flex justify-center mb-5">
            <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="rounded-lg shadow-lg max-w-full h-auto brightness-90 dark:brightness-75">
        </div>
        <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/200/150?random=1" alt="Thumbnail 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=2" alt="Thumbnail 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=3" alt="Thumbnail 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=4" alt="Thumbnail 4" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=5" alt="Thumbnail 5" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
            <img src="https://picsum.photos/200/150?random=6" alt="Thumbnail 6" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300 shadow-md">
        </div>
        <div class="flex justify-between items-center mt-5">
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Previous</button>
            <button class="bg-white text-gray-800 rounded-md px-4 py-2 shadow hover:bg-gray-100 transition">Next</button>
        </div>
    </div>
</div>

Componenti correlati

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.

Aperto

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.

Aperto

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.

Aperto