Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptiva con un diseño plano minimalista, combinación de colores monocromática y complejidad moderada, adecuado para interfaces de redes sociales. Es compatible con un tema oscuro que utiliza el prefijo dark: de Tailwind CSS y no requiere JavaScript. Las imágenes provienen de picsum.photos.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Image 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 4 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 5 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 6 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="rounded-lg shadow-md transition-transform transform group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
</div>
<!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
<div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
<div class="relative">
<img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white text-3xl">×</button>
</div>
</div>
</div>Componentes relacionados
Componente de caja de luz de imagen
Un componente de caja de luz de imagen responsiva simple diseñado para sitios web de comercio electrónico, con un estilo de modo oscuro y un esquema de color análogo.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptiva con un diseño retro / vintage y una combinación de colores en tonos tierra, adecuado para tableros.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen complejo y receptivo con un diseño "inspirado en el papel/impresión", combinación de colores en tono joya y compatibilidad con el modo oscuro, adecuado para plataformas de música/audio. Cuenta con ricos elementos interactivos.