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); }