reverse hover on anchor tag on mouse leave

Question

Is it possible to reverse this animation direction on mouseleave ?

i tried to add a mouseleave even to .link but it stops the hovering

.link { 
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 100px;
}
.box {
  width: 100%;
  height: 100%;
  content: '';
  background: black;
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease-in;
}
.link:hover .box {
  transform: translateX(0)
}

<a class="link">
  item
  <span class="box"></span>
</a>

What exactly do you mean by "reversing the animation" when you leave? When you leave the animation reverses itself already. — Kasey Chang, May 17 '20 at 07:18
@KaseyChang reverse the direction from left to right instead of right to left — Konya, May 17 '20 at 07:20
Is this what you are looking for: https://stackoverflow.com/a/15194324/2279082 — ArielGro, May 17 '20 at 07:29
So when the hover starts, you want it to "slide in" from the right, but when you leave hover, you want it to "slide out" from the LEFT? — Kasey Chang, May 17 '20 at 07:44

Temani Afif · Accepted Answer · 2020-05-17T11:54:32.537

Using scale combined with transform-origin it's possible:

.link {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 100px;
}

.link::after {
  content: '';
  height: 100%;
  background: black;
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in, transform-origin 0s 0.4s;
}

.link:hover::after {
  transform: scaleX(1);
  transform-origin: right;
}

<a class="link">
  item
</a>

Related question to get different ideas using background: How to animate underline from left to right?

score 1 · Answer 2 · answered May 17 '20 at 07:40

1

.link { 
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 100px;
}
.box {
  width: 100%;
  height: 100%;
  content: '';
  background: black;
  position: absolute;
  left: 0;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
}
.link:hover .box {
  transform: translateX(0)
}

<a class="link">
  item
  <span class="box"></span>
</a>

answered May 17 '20 at 07:40

Rush W.

1,321
2
11
19

This is not what the OP was looking for.. OP meant transition in from left to right and transition out to the same direction. Think of a car coming from left to right, stopping and then continue the same way – ArielGro May 17 '20 at 07:55

reverse hover on anchor tag on mouse leave

2 Answers2