Componenti Immagine Lightbox Componente Lightbox immagine

Componente Lightbox immagine

Un complesso componente Image Lightbox progettato in stile brutalista, adatto per le interfacce dei social media, caratterizzato da una combinazione di colori in scala di grigi e contrasto elevato per il supporto della modalità oscura.

Anteprima

Codice HTML

<div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>

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 immagine

Un componente lightbox per immagini scheumorfiche progettato per imitare le controparti del mondo reale, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Lightbox immagine

Un componente lightbox per immagini reattivo progettato in stile brutalista con toni della Terra. È dotato di un supporto per la modalità oscura per la visualizzazione del dashboard.

Aperto