Lightbox immagine scheumorfa
Un componente lightbox per immagini reattivo con un design scheumorfico in scala di grigi per portfolio, che supporta la modalità scura.
Codice 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>
Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini reattivo progettato in modalità scura utilizzando Tailwind CSS. Presenta uno sfondo scuro, effetti di opacità e design reattivi per adattarsi a varie dimensioni dello schermo.
Cyberpunk Immagine agricola Lightbox
Un componente lightbox per immagini complesso e reattivo con un'estetica cyberpunk, caratterizzato da una combinazione di colori viola/viola, progettato per siti Web agricoli e agricoli. Supporta la modalità oscura e visualizza immagini con titoli, descrizioni e metadati di base.
Componente Lightbox immagine
Un componente lightbox per immagini reattivo con colori neutri freddi, transizioni sfumate e supporto per la modalità scura, adatto per servizi di consulenza professionale.