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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<h2 class="font-bold text-lg">Image Title</h2>
<p class="text-sm">Image description goes here.</p>
</div>
</div>
<div class="mt-4">
<button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
<span class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
View User's Images
</span>
</button>
</div>
</div>Componentes relacionados
Caja de luz púrpura para juegos 3D
Un componente de caja de luz de imagen simple y receptivo con elementos de diseño 3D y un esquema de color púrpura/violeta, adecuado para sitios web de juegos.
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
Componente de caja de luz de imagen con diseño retro / vintage, combinación de colores análoga, complejidad simple, para fines comerciales / corporativos. Responsivo con soporte para temas oscuros. HTML solo con Tailwind CSS.