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

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.

Aperçu

HTML Code

<div class="relative p-4 max-w-lg mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Thumbnail Images -->
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode Support -->
<style>
    .bg-vibrant-500 {
        background-color: #ff4c4c; /* Example vibrant color */
    }

    @media (prefers-color-scheme: dark) {
        .bg-vibrant-500 {
            background-color: #ff6b6b; /* Dark mode vibrant color */
        }
    }
</style>

Composants associés

Composant Lightbox d’image

Un composant Image Lightbox réactif conçu dans le style Material Design, avec une palette de couleurs triadique et la prise en charge du mode sombre. Il convient pour présenter des portfolios ou des produits.

Ouvrir

Composant Lightbox d’image rétro

Un composant Lightbox d’image réactif et simple avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux blogs et aux sites de contenu.

Ouvrir

Composant Lightbox d’image

Un composant Image Lightbox réactif conçu pour le commerce électronique, avec prise en charge du mode sombre et une palette de couleurs de tons de terre.

Ouvrir