Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico con un estilo de diseño plano minimalista, que admite temas claros y oscuros utilizando Tailwind CSS.
Código HTML
<div class="relative inline-block cursor-pointer group">
<img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
<span class="text-white text-2xl font-semibold">View Image</span>
</div>
</div>
<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
<div class="relative w-full max-w-3xl">
<img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
</div>
</div>
<style>
/* Dark Mode Support */
.dark .bg-gray-900 { background-color: #1b1b1b; }
.dark .bg-black { background-color: #000; }
</style>Componentes relacionados
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado con elementos 3D, colores vibrantes y complejidad moderada para sitios web comerciales / corporativos. Es compatible con el estilo del modo oscuro mediante Tailwind CSS.
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.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen responsivo diseñado en modo oscuro usando Tailwind CSS. Cuenta con un fondo oscuro, efectos de opacidad y diseños receptivos para adaptarse a varios tamaños de pantalla.