Animated Blog Post Cards

<!--
  Day 24: Animated blog post cards

  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 Grid -->
<div
  class="mx-auto grid w-full max-w-sm grid-cols-1 gap-8 lg:max-w-5xl lg:grid-cols-3 lg:gap-12"
>
  <!-- Blog Post Card -->
  <a
    href="javascript:void(0)"
    class="group relative mx-auto block w-full max-w-xs overflow-hidden rounded-lg ring-8 shadow-lg ring-white/50 transition ease-in active:opacity-75"
  >
    <div
      class="scale-125 transition duration-150 ease-in group-hover:scale-100"
    >
      <img
        src="https://images.unsplash.com/photo-1457459686225-c7db79d4e59f?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Mountain Peak"
        class="aspect-3/4 w-full rounded-lg object-cover"
      />
    </div>
    <div
      class="absolute inset-0 bg-linear-to-b from-transparent via-black/50 to-black/90 opacity-50 transition duration-150 group-hover:opacity-100"
    ></div>
    <div
      class="absolute inset-0 flex flex-col justify-end px-4 py-10 text-center transition duration-150 ease-in group-hover:-translate-y-24"
    >
      <h2 class="text-xl font-bold text-white">
        Best Peaks to Climb Near Your Home
      </h2>
    </div>
    <div
      class="absolute inset-0 flex flex-col justify-end px-4 py-10 text-center transition duration-150 ease-in group-hover:-translate-y-6"
    >
      <p
        class="text-sm font-medium text-white/80 opacity-0 duration-300 ease-in group-hover:opacity-100"
      >
        An inspiring adventure discovering the most amazing peaks.
      </p>
    </div>
  </a>
  <!-- END Blog Post Card -->

  <!-- Blog Post Card -->
  <a
    href="javascript:void(0)"
    class="group relative mx-auto block w-full max-w-xs overflow-hidden rounded-lg ring-8 shadow-lg ring-white/50 transition ease-in active:opacity-75"
  >
    <div
      class="scale-125 transition duration-150 ease-in group-hover:scale-100"
    >
      <img
        src="https://images.unsplash.com/photo-1517639735409-5d4a41f000ae?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Mountain Lake"
        class="aspect-3/4 w-full rounded-lg object-cover"
      />
    </div>
    <div
      class="absolute inset-0 bg-linear-to-b from-transparent via-black/50 to-black/90 opacity-50 transition duration-150 group-hover:opacity-100"
    ></div>
    <div
      class="absolute inset-0 flex flex-col justify-end px-4 py-10 text-center transition duration-150 ease-in group-hover:-translate-y-24"
    >
      <h2 class="text-xl font-bold text-white">
        10 Beautiful Lakes to Visit in 1 Week
      </h2>
    </div>
    <div
      class="absolute inset-0 flex flex-col justify-end px-4 py-10 text-center transition duration-150 ease-in group-hover:-translate-y-6"
    >
      <p
        class="text-sm font-medium text-white/80 opacity-0 duration-300 ease-in group-hover:opacity-100"
      >
        An inspiring adventure discovering the most amazing lakes.
      </p>
    </div>
  </a>
  <!-- END Blog Post Card -->

  <!-- Blog Post Card -->
  <a
    href="javascript:void(0)"
    class="group relative mx-auto block w-full max-w-xs overflow-hidden rounded-lg ring-8 shadow-lg ring-white/50 transition ease-in active:opacity-75"
  >
    <div
      class="scale-125 transition duration-150 ease-in group-hover:scale-100"
    >
      <img
        class="aspect-3/4 w-full rounded-lg object-cover"
        src="https://images.unsplash.com/photo-1505118380757-91f5f5632de0?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Beaches"
      />
    </div>
    <div
      class="absolute inset-0 bg-linear-to-b from-transparent via-black/50 to-black/90 opacity-50 transition duration-150 group-hover:opacity-100"
    ></div>
    <div
      class="absolute inset-0 flex flex-col justify-end px-4 py-10 text-center transition duration-150 ease-in group-hover:-translate-y-24"
    >
      <h2 class="text-xl font-bold text-white">
        Which Beaches to Visit this Summer?
      </h2>
    </div>
    <div
      class="absolute inset-0 flex flex-col justify-end px-4 py-10 text-center transition duration-150 ease-in group-hover:-translate-y-6"
    >
      <p
        class="text-sm font-medium text-white/80 opacity-0 duration-300 ease-in group-hover:opacity-100"
      >
        An inspiring adventure discovering the most amazing beaches.
      </p>
    </div>
  </a>
  <!-- END Blog Post Card -->
</div>
<!-- END Cards Grid -->