Cursor Tilt Card Hover: CSS Hover Effect

Cursor Tilt Card Hover

A plan card that tips the corner under the pointer toward you, with a glare that follows. A 3x3 grid of invisible cells sets the tilt, so it tracks the pointer in nine steps without JavaScript.

Also known as: tilt card follows mouse css, vanilla tilt without javascript, 3d hover tilt effect.

Color Base size 16px Dark background Hold hover state

HTML

<a class="hfx-cursor-tilt-card" href="#">
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-cell" aria-hidden="true"></span>
  <span class="hfx-cursor-tilt-card-face">
    <span class="hfx-cursor-tilt-card-glare"></span>
    <span class="hfx-cursor-tilt-card-tag">Pro plan</span>
    <span class="hfx-cursor-tilt-card-price">$24<small>/month</small></span>
    <span class="hfx-cursor-tilt-card-note">Unlimited projects and priority support</span>
  </span>
</a>

CSS

.hfx-cursor-tilt-card {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  perspective: 40em;
  font: 400 var(--hfx-size, 16px) system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
}
.hfx-cursor-tilt-card-cell {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: calc(100% / 3);
}
.hfx-cursor-tilt-card-cell:nth-child(3n + 2) { left: calc(100% / 3); }
.hfx-cursor-tilt-card-cell:nth-child(3n) { left: calc(200% / 3); }
.hfx-cursor-tilt-card-cell:nth-child(n + 4) { top: calc(100% / 3); }
.hfx-cursor-tilt-card-cell:nth-child(n + 7) { top: calc(200% / 3); }
.hfx-cursor-tilt-card-face {
  --x: 0;
  --y: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 14em;
  height: 8.6em;
  padding: 1em 1.2em 1.1em;
  overflow: hidden;
  border-radius: 0.9em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000));
  box-shadow: 0 0.6em 1.2em -0.6em color-mix(in srgb, var(--c) 70%, transparent);
  /* the corner under the pointer lifts toward the viewer */
  transform: rotateX(calc(var(--y) * 12deg)) rotateY(calc(var(--x) * -12deg));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-cursor-tilt-card-glare {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.4), transparent 40%);
  opacity: 0;
  transform: translate(calc(var(--x) * 22%), calc(var(--y) * 22%));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
  pointer-events: none;
}
.hfx-cursor-tilt-card-tag {
  position: relative;
  padding: 0.3em 0.7em;
  border-radius: 2em;
  background: rgb(255 255 255 / 0.2);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hfx-cursor-tilt-card-price {
  position: relative;
  margin-top: auto;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.1;
}
.hfx-cursor-tilt-card small {
  font-size: 0.45em;
  font-weight: 500;
  opacity: 0.8;
}
.hfx-cursor-tilt-card-note {
  position: relative;
  font-size: 0.8em;
  opacity: 0.85;
}
.hfx-cursor-tilt-card:is(:hover, :focus-visible) .hfx-cursor-tilt-card-face {
  scale: 1.04;
  box-shadow: 0 1.2em 1.8em -0.9em color-mix(in srgb, var(--c) 75%, transparent);
}
.hfx-cursor-tilt-card:is(:hover, :focus-visible) .hfx-cursor-tilt-card-glare {
  opacity: 1;
}
.hfx-cursor-tilt-card:focus-visible {
  outline: none;
}
.hfx-cursor-tilt-card:focus-visible .hfx-cursor-tilt-card-face {
  outline: 2px solid var(--c);
  outline-offset: 0.25em;
}
.hfx-cursor-tilt-card-cell:nth-child(1):hover ~ .hfx-cursor-tilt-card-face { --x: -1; --y: -1; }
.hfx-cursor-tilt-card-cell:nth-child(2):hover ~ .hfx-cursor-tilt-card-face { --x: 0; --y: -1; }
.hfx-cursor-tilt-card-cell:nth-child(3):hover ~ .hfx-cursor-tilt-card-face { --x: 1; --y: -1; }
.hfx-cursor-tilt-card-cell:nth-child(4):hover ~ .hfx-cursor-tilt-card-face { --x: -1; --y: 0; }
.hfx-cursor-tilt-card-cell:nth-child(5):hover ~ .hfx-cursor-tilt-card-face { --x: 0; --y: 0; }
.hfx-cursor-tilt-card-cell:nth-child(6):hover ~ .hfx-cursor-tilt-card-face { --x: 1; --y: 0; }
.hfx-cursor-tilt-card-cell:nth-child(7):hover ~ .hfx-cursor-tilt-card-face { --x: -1; --y: 1; }
.hfx-cursor-tilt-card-cell:nth-child(8):hover ~ .hfx-cursor-tilt-card-face { --x: 0; --y: 1; }
.hfx-cursor-tilt-card-cell:nth-child(9):hover ~ .hfx-cursor-tilt-card-face { --x: 1; --y: 1; }

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

Customizing this snippet

Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Cursor Tilt Card Hover

HTML

CSS

Customizing this snippet

Similar hover effects

Weekend in Lisbon

Weekend in Lisbon

Weekend in Lisbon