Hotel Card With Animation

<figure class="group w-[30rem] h-[38rem] relative m-0 overflow-hidden rounded-lg">
  <a href="#">
    <img
      src="https://travel-land-eta.vercel.app/_next/image?url=%2Fstatic%2Fimages%2Fhotel-5.webp&w=3840&q=75"
      alt="Great Barrier Reef, Australia"
      class="w-full h-full block object-cover group-hover:scale-100 scale-[1.2] transition-transform ease-in-out duration-300 group-hover:opacity-100 translate-y-0 translate-x-0 rotate-0 rounded-lg"
    />
  </a>
  <figcaption class="h-full group-hover:bg-[linear-gradient(180deg,rgba(21,22,24,0.24)_0%,#151618_100%)] before:ease-in-out before:duration-300 absolute pointer-events-none flex flex-col justify-end gap-8 px-10 py-16 inset-0 z-[1] before:content-[''] before:absolute before:opacity-0 before:transition-opacity">
    <main class="flex group-hover:opacity-100 flex-col justify-end gap-8 opacity-0 transition-[opacity,transform] transform -translate-y-[6rem] ease-in-out duration-300 group-hover:translate-y-0">
      <p class="small text-white text-sm uppercase m-0">9-day trip</p>
      <h3 class="m-0 text-4xl font-normal text-white leading-tight">
        Shangri La Bosphorus Istanbul, <em>Turkey</em>
      </h3>
      <p class="text-base leading-relaxed italic text-gray-200">
        In a city that straddles Europe and Asia, discover an enchanting
        retreat that draws on influences of East and West in Shangri-La
        Bosphorus, Istanbul.
      </p>
    </main>
    <footer class="flex group-hover:translate-y-0 group-hover:opacity-100 justify-between items-center transition-[opacity,transform] opacity-0 transform translate-y-[6rem] ease-in-out duration-300">
      <div>
        <p class="small text-white text-[0.8125rem] font-bold uppercase m-0">
          From
        </p>
        <p class="price text-2xl text-white font-variant-numeric lining-nums proportional-nums m-0">
          €2,500
        </p>
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        class=" h-6 w-6 delay-300 text-white opacity-0 transition-[transform,opacity] transform -translate-x-[3rem] rotate-[360deg] group-hover:translate-x-0 group-hover:rotate-0 group-hover:opacity-100"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
        />
      </svg>
    </footer>
  </figcaption>
</figure>