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

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Bild-Lightbox-Komponente

Eine Retro-/Vintage-Bild-Lightbox-Komponente mit lebendigen Farben, responsivem Design und Unterstützung für dunkle Themen, die für Portfolios geeignet ist.

Offen

Memphis_Monochrome_Image_Lightbox

Eine einfache, reaktionsschnelle Bild-Lightbox-Komponente mit einem Einfluss von Memphis Design und einer monochromen Palette mit einer einzigen hellen Akzentfarbe. Entwickelt für Job-/Karriereplattformen.

Offen

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente, die für den E-Commerce mit einem minimalistischen Flat-Design-Stil entwickelt wurde und helle und dunkle Themen mit Tailwind CSS unterstützt.

Offen