0

So I saw this site that does a hover effect, except when you move your mouse away, the card moves back to its original place in a fluid motion, instead of instantly resetting back to 0.

Is that possible to do with just CSS? Or did this person use an animation library and effect?

Here is my CSS that makes the cards hover upwards.

.card__container:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease-in-out;
}

The problem is right when I remove my mouse, it instantly snaps back into its original place, but I want it to go back fluidly in one motion. If I had it set to like translateY(-100px) right when I remove my mouse, it would instantly reset back to position 0, but I want it to slowly flow back into its spot. That's an exaggerated example, but that's the effect I'm trying to replicate

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
designxd10
  • 57
  • 8

1 Answers1

2

To make the transition works for both hovering and non-hovering, you need to define the transition in the normal state:

.card__container {
  /* define the transition here */
  transition: all 0.3s ease-in-out;
}

.card__container:hover {
  transform: translateY(-5px);
}
Hao Wu
  • 17,573
  • 6
  • 28
  • 60