<div class="card-09">
  <div class="card-09__bg"></div>
  <div class="card-09__mid">
    <span class="card-09__tag">3D</span>
    <h4 class="card-09__title">Depth Parallax</h4>
  </div>
  <div class="card-09__fg">
    <p class="card-09__body">Layers shift at different speeds.</p>
  </div>
</div>

.card-09__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-09__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-09__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-09 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #0d0d1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: none;
  transform-style: preserve-3d;
  min-height: 130px;
}
.card-09__bg {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(124, 108, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(61, 232, 245, 0.14), transparent 50%);
  will-change: transform;
}
.card-09__mid,
.card-09__fg {
  position: relative;
  will-change: transform;
}
.card-09__mid {
  margin-bottom: 8px;
}

document.querySelectorAll(".card-09").forEach(function (card) {
  var bg  = card.querySelector(".card-09__bg");
  var mid = card.querySelector(".card-09__mid");
  var fg  = card.querySelector(".card-09__fg");
  card.addEventListener("mousemove", function (e) {
    var r = card.getBoundingClientRect();
    var x = (e.clientX - r.left) / r.width  - 0.5;
    var y = (e.clientY - r.top)  / r.height - 0.5;
    bg.style.transform  = "translate(" + (x * -20) + "px," + (y * -20) + "px)";
    mid.style.transform = "translate(" + (x * -12) + "px," + (y * -12) + "px)";
    fg.style.transform  = "translate(" + (x * -6)  + "px," + (y * -6)  + "px)";
  });
  card.addEventListener("mouseleave", function () {
    bg.style.transform = mid.style.transform = fg.style.transform = "";
  });
});