Hover Card Overlay with Blur Effect

<div class="group relative overflow-hidden ring-1 ring-neutral-200 cursor-pointer h-80 bg-white rounded-3xl shadow-sm">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a64e6770-50ba-4159-829d-d5f20fab2595_800w.jpg" alt="SaaS analytics platform" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div>
    <div class="absolute bottom-0 left-0 right-0 p-5">
      <p class="text-xs text-white/70">SaaS • Analytics</p>
      <div class="mt-1 flex items-center justify-between">
        <h3 class="text-base sm:text-lg font-semibold tracking-tight text-white">Telemetry Cloud</h3>
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-900">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
        </span>
      </div>
    </div>
    <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex bg-black/40 pt-6 pr-6 pb-6 pl-6 backdrop-blur-md items-center justify-center">
      <div class="transform group-hover:translate-y-0 transition-transform duration-300 delay-75 text-center translate-y-8">
        <h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-3">Telemetry Cloud</h3>
        <p class="text-sm text-white/90 leading-relaxed mb-4">Advanced analytics platform for SaaS companies. Real-time insights, custom dashboards, and predictive analytics to drive growth.</p>
        <div class="inline-flex items-center gap-2 rounded-full bg-white/20 text-white text-xs px-3 py-1.5 backdrop-blur-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          Live Project
        </div>
      </div>
    </div>
  </div>