Interactive Image Card with

<div class="w-full max-w-2xl mx-auto">
  <div class="relative group overflow-hidden rounded-xl shadow-xl bg-gray-900">
    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/366dc3f4-74dc-4d5b-9c9b-9ff9993cb225_3840w.jpg" alt="Interactive Image" class="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-110" loading="lazy" />
    <div class="absolute inset-0 bg-black bg-opacity-0
      group-hover:bg-opacity-50 transition-all duration-300 flex
      items-center justify-center">
      <div class="text-white text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 px-4">
        <h3 class="text-2xl font-bold mb-2">Image Title</h3>
        <p class="text-sm">Hover to see more details</p>
      </div>
    </div>
  </div>
</div>