Componente de caja de luz de imagen
Un componente de caja de luz de imagen receptivo diseñado con elementos 3D, colores vibrantes y complejidad moderada para sitios web comerciales / corporativos. Es compatible con el estilo del modo oscuro mediante Tailwind CSS.
Código HTML
<div class="relative p-4 max-w-lg mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Thumbnail Images -->
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
<div class="group">
<div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
<button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
</div>
</div>
</div>
</div>
</div>
<!-- Dark Mode Support -->
<style>
.bg-vibrant-500 {
background-color: #ff4c4c; /* Example vibrant color */
}
@media (prefers-color-scheme: dark) {
.bg-vibrant-500 {
background-color: #ff6b6b; /* Dark mode vibrant color */
}
}
</style>Componentes relacionados
Componente de la caja de luz de la imagen - Skeuomorphic Purple
Un componente de caja de luz de imagen simple y receptivo con un diseño esqueuomórfico en el espectro púrpura/violeta, adecuado para plataformas de trabajo/carrera. Incluye soporte para modo oscuro.
Componente de caja de luz de imagen
Un componente de caja de luz de imagen lúdico y divertido para CRM/Business Tools, con un esquema de color en escala de grises, elementos redondeados y una interfaz compleja para la visualización interactiva de imágenes. Totalmente receptivo con soporte para 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.