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 Image Lightbox in stile brutalista adatto per un blog o una piattaforma di contenuti, progettato con toni della terra ed elementi interattivi complessi.

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 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.

Aperto