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

Cyberpunk Landwirtschaftlicher Bild-Leuchtkasten

Eine komplexe, reaktionsschnelle Bild-Lightbox-Komponente mit Cyberpunk-Ästhetik und einem lila/violetten Farbschema, das für landwirtschaftliche und landwirtschaftliche Websites entwickelt wurde. Es unterstützt den Dunkelmodus und zeigt Bilder mit Titeln, Beschreibungen und grundlegenden Metadaten an.

Offen

Cyberpunk_Real_Estate_Lightbox

Eine einfache, reaktionsschnelle Bild-Lightbox-Komponente mit Cyberpunk-inspiriertem, gedämpftem Farbschema, das sich für Immobilienangebote eignet. Bietet Unterstützung für den Dunkelmodus und verwendet semantisches HTML.

Offen

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente, die für Dashboards entwickelt wurde und einen 3D-Stil und ein monochromatisches Farbschema aufweist. Es enthält Hover-Effekte und modale Funktionen mit Tailwind CSS für die Unterstützung des Dunkelmodus.

Offen