Cards Stack with Hover Effect 2

<!--
  Day 31: Cards stack with hover effect 2

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Cards Stack -->
<a
  href="javascript:void(0)"
  class="group relative mx-auto flex w-full max-w-xs flex-col transition duration-125 active:opacity-75"
>
  <!-- Card Behind Top -->
  <div
    class="absolute inset-0 origin-bottom -translate-y-20 scale-75 rounded-lg bg-white/90 p-2 shadow-lg blur-sm backdrop-blur-xs transition duration-150 group-hover:-translate-y-24 group-hover:blur-none"
  >
    <img
      src="https://images.unsplash.com/photo-1556020685-ae41abfc9365?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Apartment Image 1"
      class="aspect-4/3 rounded-sm object-cover"
    />
  </div>
  <!-- END Card Behind Top -->

  <!-- Card Behind Left -->
  <div
    class="absolute inset-0 origin-bottom-left scale-75 -rotate-12 rounded-lg bg-white/90 p-2 shadow-lg blur-sm backdrop-blur-xs transition duration-150 group-hover:-translate-x-6 group-hover:-rotate-12 group-hover:blur-none"
  >
    <img
      src="https://images.unsplash.com/photo-1512918728675-ed5a9ecdebfd?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Apartment Image 2"
      class="aspect-4/3 rounded-sm object-cover"
    />
  </div>
  <!-- END Card Behind Left -->

  <!-- Card Behind Right -->
  <div
    class="absolute inset-0 origin-bottom-right scale-75 rotate-12 rounded-lg bg-white/90 p-2 shadow-lg blur-sm backdrop-blur-xs transition duration-150 group-hover:translate-x-6 group-hover:rotate-12 group-hover:blur-none"
  >
    <img
      src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Apartment Image 3"
      class="aspect-4/3 rounded-sm object-cover"
    />
  </div>
  <!-- END Card Behind Right -->

  <!-- Main Card -->
  <div
    class="relative rounded-lg bg-white/90 p-2 shadow-lg backdrop-blur-xs transition duration-150 group-hover:scale-105"
  >
    <div
      class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2"
    >
      <h3
        class="rounded-sm bg-black/40 px-3 py-4 text-xl/3 font-semibold text-white"
      >
        Cosy Apartment 45m<sup>3</sup>
      </h3>
    </div>
    <div class="relative">
      <img
        src="https://images.unsplash.com/photo-1499916078039-922301b0eb9b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Apartment Image"
        class="aspect-4/3 rounded-sm object-cover"
      />
    </div>
  </div>
  <!-- END Main Card -->
</a>
<!-- END Cards Stack -->