CCHub Logo CCHub Tailwind Collection
Komponenten Bild-Lightbox Bild-Lightbox-Komponente

Bild-Lightbox-Komponente

Eine komplexe Bild-Lightbox-Komponente, die im brutalistischen Stil gestaltet ist und sich für Social-Media-Schnittstellen eignet, mit einem Graustufen-Farbschema und hohem Kontrast für die Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Bild-Lightbox-Komponente

Eine reaktionsschnelle Bild-Lightbox-Komponente, die im Material Design-Stil entworfen wurde und ein triadisches Farbschema und Unterstützung für den Dunkelmodus bietet. Es eignet sich für Portfolios, in denen Arbeiten oder Produkte präsentiert werden.

Offen

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente mit einem Retro-/Vintage-Theme unter Verwendung von Tailwind CSS, die den Dunkelmodus unterstützt und Platzhalterbilder enthält.

Offen

Bild-Lightbox-Komponente

Image Lightbox Komponente mit Retro / Vintage-Design, analoges Farbschema, einfache Komplexität, für Geschäfts- / Unternehmenszwecke. Reaktionsschnell mit Unterstützung für dunkle Themen. HTML nur mit Tailwind CSS.

Offen