Card hover effects

Cards, one of the most common layout elements in modern web design, provide a ton of opportunities for creative hover effects. Here are a few examples of card hover effects that you can use to make your website more interactive and engaging.

Rotating card

To create a two-sided card that rotates on hover, you first need a container element with two child elements, one for the front side and one for the back side of the card. You can then use the rotateY() function to rotate the card around the Y-axis, and the backface-visibility property to hide the back side of the card when it is not visible.

<div class="rotating-card">
  <div class="card-side front"></div>
  <div class="card-side back"></div>
</div>

.rotating-card {
  perspective: 150rem;
  position: relative;
  box-shadow: none;
  background: none;
}

.rotating-card .card-side {
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.rotating-card .card-side.back {
  transform: rotateY(-180deg);
}

.rotating-card:hover .card-side.front {
  transform: rotateY(180deg);
}

.rotating-card:hover .card-side.back {
  transform: rotateY(0deg);
}

Shifting card

For a shifting card, you will need to leverage CSS variables and a little bit of JavaScript to track the position of the mouse cursor and adjust the card's position accordingly. You'll use the mousemove event to track the cursor's position and calculate the relative distance between the cursor and the center of the card, using Element.getBoundingClientRect() to get the card's position and dimensions.

Then, using the CSS variables, you can apply a transform property to the card element that shifts it based on the cursor's position. To make the change smoother, use the transition property to animate the transformation.

.shifting-card {
  transition: transform 0.2s ease-out;
  transform: rotateX(calc(10deg * var(--dx, 0)))
    rotateY(calc(10deg * var(--dy, 0)));
}

const card = document.querySelector('.shifting-card');
const { x, y, width, height } = card.getBoundingClientRect();
const cx = x + width / 2;
const cy = y + height / 2;

const handleMove = e => {
  const { pageX, pageY } = e;
  const dx = (cx - pageX) / (width / 2);
  const dy = (cy - pageY) / (height / 2);
  e.target.style.setProperty('--dx', dx);
  e.target.style.setProperty('--dy', dy);
};

card.addEventListener('mousemove', handleMove);

Perspective card

Finally, for the perspective card, you will only need a transform with a perspective() function and a rotateY() function to create the perspective effect. The transition property will animate the transform attribute on hover.

.perspective-card {
  transform: perspective(1500px) rotateY(15deg);
  transition: transform 1s ease 0s;
}

.perspective-card:hover {
  transform: perspective(3000px) rotateY(5deg);
}