Componente de caja de luz de imagen

<div class="relative inline-block cursor-pointer group">
    <img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <span class="text-white text-2xl font-semibold">View Image</span>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
    <div class="relative w-full max-w-3xl">
        <img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
        <button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
    </div>
</div>

<style>
    /* Dark Mode Support */
    .dark .bg-gray-900 { background-color: #1b1b1b; }
    .dark .bg-black { background-color: #000; }
</style>