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

Componente de caja de luz de imagen

Un complejo componente de caja de luz de imagen diseñado en un estilo brutalista, adecuado para interfaces de redes sociales, con un esquema de color en escala de grises y alto contraste para compatibilidad con el modo oscuro.

Vista previa

Código HTML

<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>

Componentes relacionados

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.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado en el estilo Material Design, con un esquema de color triádico y soporte para el modo oscuro. Es adecuado para mostrar trabajos o productos en portafolios.

Abrir

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsivo con un tema retro/vintage que usa Tailwind CSS, admite el modo oscuro y presenta imágenes de marcador de posición.

Abrir