Composants Boîte lumineuse d’image Composant Lightbox d’image

Composant Lightbox d’image

Composant Lightbox d’image avec un design rétro / vintage, une palette de couleurs analogue, une complexité simple, à des fins commerciales / d’entreprise. Réactif avec prise en charge du thème sombre. HTML uniquement avec Tailwind CSS.

Aperçu

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>

Composants associés

Boîte lumineuse d’image

Composant Lightbox d’image réactive avec thème sombre

Ouvrir

Composant de boîte lumineuse d’image - Violet skeuomorphe

Un composant de lightbox d’image simple et réactif avec un design skeuomorphe dans le spectre violet/violet, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.

Ouvrir

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un design plat minimaliste, une palette de couleurs monochromatique et une complexité modérée, adapté aux interfaces de médias sociaux. Il prend en charge un thème sombre à l’aide du préfixe dark : de Tailwind CSS et ne nécessite pas de JavaScript. Les images proviennent de picsum.photos.

Ouvrir