Componente Lightbox immagine
Un componente lightbox per immagini reattivo progettato con lo stile Glassmorphism utilizzando Tailwind CSS. Il componente supporta un tema scuro con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura.
Codice HTML
<div class="relative">
<button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
<img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
</button>
<div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
<div class="flex items-center justify-center h-full">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
<img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
<button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
</div>
</div>
</div>
</div>
<style>
/* Lightbox toggle visibility */
#lightbox:target {
display: flex;
}
</style>Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini giocoso e divertente per CRM/Business Tools, con una combinazione di colori in scala di grigi, elementi arrotondati e un'interfaccia complessa per la visualizzazione interattiva delle immagini. Completamente reattivo con supporto per la modalità oscura.
Memphis_Monochrome_Image_Lightbox
Un componente lightbox per immagini semplice e reattivo con un'influenza di Memphis Design, caratterizzato da una tavolozza monocromatica con un unico colore d'accento brillante. Progettato per piattaforme di lavoro/carriera.
Componente Lightbox immagine
Un componente lightbox per immagini retrò/vintage con colori vivaci, design reattivo e supporto per temi scuri, adatto per i portfolio.