Boîte lumineuse d’image skeuomorphe
Un composant de lightbox d’image réactif avec un design skeuomorphe en niveaux de gris pour les portfolios, prenant en charge le mode sombre.
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>
Composants associés
Glassmorphism Lightbox avec tons sépia pour l’immobilier
Un composant de lightbox d’image réactif avec un design glassmorphism, avec des éléments translucides semblables à du verre dépoli et des tons de couleur sépia/brun, adapté aux galeries d’images immobilières. Inclut la prise en charge du mode sombre.
Composant Lightbox d’image
Un composant de visionneuse d’images ludique et amusant pour les outils CRM/Business, avec une palette de couleurs en niveaux de gris, des éléments arrondis et une interface complexe pour la visualisation interactive des images. Entièrement réactif avec prise en charge du mode sombre.
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.