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

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.

Vorschau

HTML-Code 

<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Image 1 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover 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">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>
    
    <!-- Add more images as needed -->

  </div>
</div>

Verwandte Komponenten

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.

Offen

Bild-Lightbox-Komponente

Eine einfache, reaktionsschnelle Bild-Lightbox-Komponente im Glassmorphism-Stil mit Ozean-/Blautönen für soziale Medien, die den Dunkelmodus unterstützt.

Offen

Bild-Lightbox-Komponente

Eine skeuomorphe Bild-Lightbox-Komponente, die entwickelt wurde, um reale Gegenstücke nachzuahmen, mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen