Interactive Hover Image Card with Arrow Icon

<a href="#" class="group overflow-hidden hover:shadow-2xl transition-all duration-500 view-transition hover:-translate-y-2 bg-white border-gray-100 border rounded-2xl shadow-lg translate-y-8">
      <div class="relative aspect-[4/3] overflow-hidden">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c6fa2e58-1453-4710-b16d-282624017402_800w.jpg" alt="Minimalist home office design" class="absolute inset-0 w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:blur-sm">
        <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-500 scale-75 group-hover:scale-100">
          <div class="flex items-center justify-center w-12 h-12 bg-white/90 backdrop-blur-sm rounded-full shadow-xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-black transition-transform duration-300 group-hover:translate-x-0.5">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="pt-5 pr-5 pb-5 pl-5">
        <h4 class="text-lg font-semibold text-gray-900 tracking-tight group-hover:text-black transition-colors duration-300">Yacht interior design trends</h4>
        <p class="mt-2 text-sm text-gray-600 group-hover:text-gray-700 transition-colors duration-300">How to create productive spaces that inspire creativity and focus.</p>
      </div>
    </a>