Componentes Caja de luz de imagen Caja de luz de imagen esqueuomórfica

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.

Vista previa

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

Cyberpunk_Real_Estate_Lightbox

Un componente de caja de luz de imagen simple y receptivo con un esquema de color apagado inspirado en el cyberpunk, adecuado para listados de propiedades inmobiliarias. Cuenta con soporte para el modo oscuro y utiliza HTML semántico.

Abrir

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.

Abrir

Memphis_Monochrome_Image_Lightbox

Un componente de caja de luz de imagen simple y receptivo con una influencia de Memphis Design, con una paleta monocromática con un solo color de acento brillante. Diseñado para plataformas de empleo/carrera.

Abrir