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
Componente de caja de luz de imagen minimalista con diseño receptivo y soporte de tema oscuro para fines de tablero. Utiliza picsum.photos para las imágenes.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen sensible con soporte para modo oscuro. Este componente muestra una galería de imágenes y, al hacer clic en una imagen, se abre un modal de pantalla completa con flechas de navegación para navegar por las imágenes. Cuenta con un botón de cierre y utiliza colores vibrantes para resaltar elementos interactivos. El diseño se adapta a un contexto empresarial/corporativo, lo que garantiza una experiencia de usuario profesional pero atractiva.
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.