Componenti Immagine Lightbox Lightbox immagine scheumorfa

Lightbox immagine scheumorfa

Un componente lightbox per immagini reattivo con un design scheumorfico in scala di grigi per portfolio, che supporta la modalità scura.

Anteprima

Codice HTML


<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>

Componenti correlati

Componente Lightbox immagine

Un componente lightbox per immagini complesso e reattivo con un design "ispirato alla carta/stampa", una combinazione di colori in tonalità gioiello e il supporto della modalità scura, adatto per piattaforme musicali/audio. Presenta ricchi elementi interattivi.

Aperto

Componente Lightbox immagine

Un componente Image Lightbox reattivo progettato con elementi 3D, colori vivaci e complessità moderata per siti Web aziendali/aziendali. Supporta lo stile della modalità oscura utilizzando Tailwind CSS.

Aperto

Cyberpunk_Real_Estate_Lightbox

Un componente lightbox per immagini semplice e reattivo con una combinazione di colori tenui ispirata al cyberpunk, adatto per gli annunci di proprietà immobiliari. Dispone di supporto per la modalità oscura e utilizza HTML semantico.

Aperto