Marketing Cards Bordered with Content on Hover

<a href="#" class="group relative block h-64 sm:h-80 lg:h-96">
      <span class="absolute inset-0 border-2 border-dashed border-black"></span>

      <div
        class="relative flex h-full transform items-end border-2 border-black bg-white transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"
      >
        <div
          class="px-4 pb-4 transition-opacity group-hover:absolute group-hover:opacity-0 sm:px-6 sm:pb-4 lg:px-8 lg:pb-8"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-10 sm:size-12"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>

          <h2 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h2>
        </div>

        <div
          class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
        >
          <h3 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h3>

          <p class="mt-4 text-sm sm:text-base">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, praesentium
            voluptatem omnis atque culpa repellendus.
          </p>

          <p class="mt-8 font-bold">Read more</p>
        </div>
      </div>
    </a>