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

Composant Lightbox d’image

Un composant complexe de boîte lumineuse d’image conçu dans un style brutaliste, adapté aux interfaces de médias sociaux, doté d’une palette de couleurs en niveaux de gris et d’un contraste élevé pour la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>

Composants associés

Composant Lightbox d’image

Un composant de lightbox d’image réactif avec un design Skeuomorphism, des couleurs vives et la prise en charge du mode sombre, construit avec Tailwind CSS. Pas de JavaScript pour des performances améliorées.

Ouvrir

Composant Lightbox d’image

Un composant Image Lightbox de style brutaliste adapté à un blog ou à une plate-forme de contenu, conçu avec des tons de terre et des éléments interactifs complexes.

Ouvrir

Cyberpunk Image Agricole Lightbox

Un composant de lightbox d’image complexe et réactif à l’esthétique cyberpunk, avec une palette de couleurs violet/violet, conçu pour les sites Web agricoles et agricoles. Il prend en charge le mode sombre et affiche des images avec des titres, des descriptions et des métadonnées de base.

Ouvrir