Caja de luz de imagen

<div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto lg:flex lg:items-center lg:justify-center bg-black bg-opacity-90">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl mx-auto">
    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 px-4 py-3">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image Title</h3>
      <button onclick="closeModal()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <img src="https://picsum.photos/800/600" alt="Image" class="w-full h-auto rounded-lg">
    </div>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
  <!-- Image cards to trigger the lightbox -->
  <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/300" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
    <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/301" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/302" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/303" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
  
</div>

<script>
function openModal() {
  document.getElementById('imageModal').classList.remove('hidden');
}

function closeModal() {
  document.getElementById('imageModal').classList.add('hidden');
}
</script>