CCHub Logo CCHub Tailwind Collection
Komponenten Bild-Lightbox Leuchtkasten mit skeuomorphem Bild

Leuchtkasten mit skeuomorphem Bild

Eine responsive Bild-Lightbox-Komponente mit einem skeuomorphen Graustufendesign für Portfolios, die den Dunkelmodus unterstützt.

Vorschau

HTML-Code 


<div class="p-4 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Lightbox Item 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=1" alt="Portfolio Image 1" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=2" alt="Portfolio Image 2" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=3" alt="Portfolio Image 3" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Add more lightbox items as needed -->

  </div>
</div>

Verwandte Komponenten

Glassmorphism Lightbox mit Sepia-Tönen für Immobilien

Eine responsive Bild-Lightbox-Komponente mit einem Glasmorphismus-Design mit mattglasähnlichen durchscheinenden Elementen und Sepia-/Brauntönen, die sich für Bildergalerien von Immobilien eignen. Enthält Unterstützung für den Dunkelmodus.

Offen

Bild-Lightbox-Komponente

Eine responsive Bild-Lightbox-Komponente, die im Glassmorphism-Stil unter Verwendung von Tailwind CSS erstellt wurde. Die Komponente unterstützt ein dunkles Theme mit mattglasähnlichen durchscheinenden Elementen und Unschärfeeffekten.

Offen

Bild-Lightbox-Komponente

Minimalistische Bild-Lightbox-Komponente mit responsivem Design und Unterstützung für dunkle Themen für Dashboard-Zwecke. Verwendet picsum.photos für Bilder.

Offen