Caja de luz de imagen esqueuomórfica
Un componente de caja de luz de imagen receptivo con un diseño de escala de grises esqueuomórfico para carteras, compatible con el modo oscuro.
Código HTML
<div class="p-4 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Lightbox Item 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/600/400?random=1" alt="Portfolio Image 1" class="w-full h-64 object-cover rounded-lg shadow-xl
transform transition-transform duration-300 group-hover:scale-105
border-4 border-gray-300 dark:border-gray-700
group-hover:border-gray-500 dark:group-hover:border-gray-400">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100
flex items-center justify-center transition-opacity duration-300 rounded-lg
border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
<p class="text-white text-lg font-bold">View Project</p>
</div>
</div>
<!-- Lightbox Item 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/600/400?random=2" alt="Portfolio Image 2" class="w-full h-64 object-cover rounded-lg shadow-xl
transform transition-transform duration-300 group-hover:scale-105
border-4 border-gray-300 dark:border-gray-700
group-hover:border-gray-500 dark:group-hover:border-gray-400">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100
flex items-center justify-center transition-opacity duration-300 rounded-lg
border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
<p class="text-white text-lg font-bold">View Project</p>
</div>
</div>
<!-- Lightbox Item 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/600/400?random=3" alt="Portfolio Image 3" class="w-full h-64 object-cover rounded-lg shadow-xl
transform transition-transform duration-300 group-hover:scale-105
border-4 border-gray-300 dark:border-gray-700
group-hover:border-gray-500 dark:group-hover:border-gray-400">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100
flex items-center justify-center transition-opacity duration-300 rounded-lg
border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
<p class="text-white text-lg font-bold">View Project</p>
</div>
</div>
<!-- Add more lightbox items as needed -->
</div>
</div>
Componentes relacionados
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.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen esqueuomórfica diseñado para imitar a sus homólogos del mundo real, con efectos responsivos y compatibilidad con temas oscuros 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.