Componentes Caja de luz de imagen Componente de caja de luz de imagen

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo diseñado con el estilo Glassmorphism utilizando Tailwind CSS. El componente admite un tema oscuro con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque.

Vista previa

Código HTML

<div class="relative">
    <button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
        <img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
    </button>
    <div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
        <div class="flex items-center justify-center h-full">
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
                <img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
                <button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Lightbox toggle visibility */
    #lightbox:target {
        display: flex;
    }
</style>

Componentes relacionados

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico, con soporte para modo oscuro y una combinación de colores en tonos tierra.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo con diseño monoespaciado / desarrollador, combinación de colores retro / vintage y estética de criptomonedas / blockchain. Cuenta con controles de navegación, descripción de la imagen y compatibilidad con el modo oscuro.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen simple, receptivo, de estilo glassmorphism, con tonos océano/azul para redes sociales, compatible con el modo oscuro.

Abrir