Pop Out Card Hover

<article class="hfx-card-pop-out">
  <div class="hfx-card-pop-out-scene"></div>
  <svg class="hfx-card-pop-out-balloon" viewBox="0 0 40 56" aria-hidden="true">
    <path d="M20 2C9.5 2 3 10 3 19.5 3 29 11 35 15.5 40h9C29 35 37 29 37 19.5 37 10 30.5 2 20 2z"/>
    <path class="hfx-card-pop-out-stripe" d="M20 2c-5.5 5-8 14-5 38h10c3-24 .5-33-5-38z"/>
    <path class="hfx-card-pop-out-rope" d="M15.8 40.5 17 46.5M24.2 40.5 23 46.5"/>
    <rect class="hfx-card-pop-out-basket" x="15.5" y="46" width="9" height="7" rx="1.5"/>
  </svg>
  <div class="hfx-card-pop-out-body">
    <h3>Cappadocia at sunrise</h3>
    <p>Balloon flights from 5:30 am</p>
  </div>
</article>

.hfx-card-pop-out {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 13em;
  margin-top: 1.8em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  transition: box-shadow 0.4s ease;
}
.hfx-card-pop-out:hover { box-shadow: 0 0 0 1px color-mix(in srgb, #000 10%, transparent), 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent); }
.hfx-card-pop-out-scene {
  position: relative;
  height: 5.6em;
  overflow: hidden;
  border-radius: 0.8em 0.8em 0 0;
  background:
    radial-gradient(circle at 50% 118%, #fde68a 0 22%, transparent 23%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c) 40%, #fff), #fde7d3);
}
.hfx-card-pop-out-scene::before {
  content: "";
  position: absolute;
  inset: 0 -2em;
  background:
    radial-gradient(ellipse 1.4em 0.45em at 22% 30%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 1em 0.35em at 30% 36%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 1.6em 0.5em at 76% 62%, #fff 60%, transparent 62%),
    radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--c) 70%, #f97316) 0 0.3em, transparent 0.32em);
  opacity: 0.9;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-pop-out:hover .hfx-card-pop-out-scene::before { transform: translateX(-1.2em); }
.hfx-card-pop-out-balloon {
  position: absolute;
  top: 1.1em;
  left: 50%;
  width: 2.5em;
  fill: var(--c);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0.3em 0.3em color-mix(in srgb, #000 20%, transparent));
  transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.hfx-card-pop-out:hover .hfx-card-pop-out-balloon { transform: translate(-50%, -2.6em) scale(1.3) rotate(-4deg); }
.hfx-card-pop-out-stripe { fill: color-mix(in srgb, var(--c) 45%, #fff); }
.hfx-card-pop-out-rope {
  fill: none;
  stroke: #78350f;
  stroke-width: 1.2;
}
.hfx-card-pop-out-basket { fill: #92400e; }
.hfx-card-pop-out-body { padding: 0.75em 0.95em 0.85em; }
.hfx-card-pop-out h3 {
  font-weight: 600;
  margin: 0 0 0.2em;
  font-size: 0.95em;
}
.hfx-card-pop-out p {
  margin: 0;
  font-size: 0.78em;
  color: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
  .hfx-card-pop-out, .hfx-card-pop-out *, .hfx-card-pop-out::before, .hfx-card-pop-out::after, .hfx-card-pop-out *::before, .hfx-card-pop-out *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar hover effects