Componente de caja de luz de imagen retro
Un componente de caja de luz de imagen simple y receptivo con diseño retro / vintage, combinación de colores análoga y soporte de modo oscuro, adecuado para blogs y sitios de contenido.
Código HTML
<
div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
<
div
class="relative group cursor-pointer"
onclick="this.querySelector('.lightbox').classList.remove('hidden')"
>
<
img
src="https://picsum.photos/seed/retro1/500/300"
alt="Retro Image 1"
class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
>
<
div
class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
onclick="event.stopPropagation(); this.classList.add('hidden')"
>
<
img
src="https://picsum.photos/seed/retro1/800/600"
alt="Retro Image 1 Enlarged"
class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
>
<
/div
>
<
div
class="relative group cursor-pointer"
onclick="this.querySelector('.lightbox').classList.remove('hidden')"
>
<
img
src="https://picsum.photos/seed/retro2/500/300"
alt="Retro Image 2"
class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
>
<
div
class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
onclick="event.stopPropagation(); this.classList.add('hidden')"
>
<
img
src="https://picsum.photos/seed/retro2/800/600"
alt="Retro Image 2 Enlarged"
class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
>
<
/div
>
<
div
class="relative group cursor-pointer"
onclick="this.querySelector('.lightbox').classList.remove('hidden')"
>
<
img
src="https://picsum.photos/seed/retro3/500/300"
alt="Retro Image 3"
class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
>
<
div
class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
onclick="event.stopPropagation(); this.classList.add('hidden')"
>
<
img
src="https://picsum.photos/seed/retro3/800/600"
alt="Retro Image 3 Enlarged"
class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
>
<
/div
>
<
/div
>Componentes relacionados
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.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado para tableros, con un estilo 3D y un esquema de color monocromático. Incluye efectos de desplazamiento y funcionalidad modal que utiliza Tailwind CSS para la compatibilidad con el modo oscuro.
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.