Depth Parallax
Three layers — background, mid, and foreground — shift at different speeds as the cursor moves, creating a parallax depth illusion.
Depth Parallax the 9th of 27 designs in the 27 CSS Card Hover Effects collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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 = "";
});
});