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

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente mit minimalistischem, flachem Design, monochromatischem Farbschema und moderater Komplexität, die für Social-Media-Schnittstellen geeignet ist. Es unterstützt ein dunkles Theme mit dem Präfix dark: von Tailwind CSS und benötigt kein JavaScript. Die Bilder stammen von picsum.photos.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Image 1 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 2 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 3 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 4 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 5 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>

        <!-- Image 6 -->
        <div class="relative group cursor-pointer">
            <img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
                <p class="text-white text-lg font-semibold">View Image</p>
            </div>
        </div>
    </div>

    <!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="relative">
            <img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
            <button class="absolute top-4 right-4 text-white text-3xl">&times;</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente, die im Dunkelmodus mit Tailwind CSS erstellt wurde. Es verfügt über einen dunklen Hintergrund, Deckkrafteffekte und ansprechende Designs für verschiedene Bildschirmgrößen.

Offen

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente mit Neumorphism-Designstil und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen

Bild-Lightbox-Komponente

Eine responsive Image-Lightbox-Komponente, die mit 3D-Elementen, lebendigen Farben und moderater Komplexität für Geschäfts-/Unternehmenswebsites entwickelt wurde. Es unterstützt das Styling im Dunkelmodus mit Tailwind CSS.

Offen