CODEWITHSUNDEEP
javascripthtmlcss
Konya
Konya

Reputation: 97

reverse hover on anchor tag on mouse leave

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>

Upvotes: 4

Views: 192

Answers (2)

Temani Afif
Temani Afif

Reputation: 273787

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?

Upvotes: 2

Rush W.
Rush W.

Reputation: 1361

.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>

Upvotes: 1

Related Questions