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

Retro-Bild-Lightbox-Komponente

Eine reaktionsschnelle, einfache Bild-Lightbox-Komponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für den Dunkelmodus, geeignet für Blogs und Content-Websites.

Vorschau

HTML-Code 

<
  div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro1/500/300"
      alt="Retro Image 1"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro1/800/600"
        alt="Retro Image 1 Enlarged"
        class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
      >
    <
    /div
  >

  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro2/500/300"
      alt="Retro Image 2"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro2/800/600"
        alt="Retro Image 2 Enlarged"
        class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
      >
    <
    /div
  >


  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro3/500/300"
      alt="Retro Image 3"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro3/800/600"
        alt="Retro Image 3 Enlarged"
        class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
      >
    <
    /div
  >
<
/div
>

Verwandte Komponenten

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.

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

Bild-Lightbox-Komponente

Eine komplexe Image-Lightbox-Komponente, die mit skeuomorphen Elementen und einem pastellfarbenen Farbschema entworfen wurde und für Dashboard-Umgebungen geeignet ist. Es enthält ein responsives Layout, Unterstützung für dunkle Themen und eine interaktive Benutzeroberfläche.

Offen