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.
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
Composant Lightbox d’image
Un composant lightbox d’image skeuomorphe conçu pour imiter ses homologues du monde réel, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Lightbox d’image
Un composant Image Lightbox réactif conçu avec des éléments 3D, des couleurs vives et une complexité modérée pour les sites Web d’entreprise. Il prend en charge le style du mode sombre à l’aide de Tailwind CSS.
Composant Lightbox d’image
Un composant lightbox d’image réactif avec prise en charge du mode sombre. Ce composant affiche une galerie d’images, et en cliquant sur une image, une fenêtre modale plein écran avec des flèches de navigation pour parcourir les images. Il dispose d’un bouton de fermeture et utilise des couleurs vives pour mettre en évidence les éléments interactifs. Le design est adapté à un contexte d’entreprise, garantissant une expérience utilisateur à la fois professionnelle et attrayante.