Componenti Immagine Lightbox Componente Lightbox immagine

Componente Lightbox immagine

Componente lightbox immagine con design retrò / vintage, combinazione di colori analoga, complessità semplice, per scopi aziendali / aziendali. Reattivo con supporto per il tema scuro. HTML solo con Tailwind CSS.

Anteprima

Codice HTML

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

Componenti correlati

Componente Lightbox immagine

Un componente lightbox per immagini reattivo progettato in stile brutalista con toni della Terra. È dotato di un supporto per la modalità oscura per la visualizzazione del dashboard.

Aperto

Componente Lightbox immagine

Un componente lightbox per immagini reattivo progettato in modalità scura utilizzando Tailwind CSS. Presenta uno sfondo scuro, effetti di opacità e design reattivi per adattarsi a varie dimensioni dello schermo.

Aperto

Componente Lightbox immagine

Un componente lightbox per immagini reattivo con un design retrò/vintage e una combinazione di colori della terra, adatto per cruscotti.

Aperto