CSS animation expand width from 0 to 100 and hide from 0 to 100

Question

I was trying to figure it out how the things are done on this webpage hover effect on projects. As you can notice hover is showing from right to left and hide from the same direction. I'm struggling to achieve this effect. That's what I have done so far:

HTML
<div class="text">Simple text</div>
<div class="img"></div>

SCSS
$square-color: #FF4136;

.text{
  position: absolute;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.img{
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 75px;
  height: 100%;
  background-color: $square-color;
  // visibility: hidden;
  opacity: 0;

  &.fade-in{
    animation: .5s linear fadein forwards;
  }

  &.fade-out{
    animation: .5s linear fadeout forwards alternate;
  }

}

@keyframes fadein {
  from{
    opacity: 0;
    width: 0px;
  }
  to{
    opacity: 1;
    width: 75px;
  }
}

@keyframes fadeout{
  from{
    opacity: 1;
    width: 75px;
    transform-origin: left;
  }
  to{
    opacity: 0;
    width: 0px;
  }
}
JS
const txt = document.querySelector('.text');
const img = document.querySelector('.img');

txt.addEventListener('mouseover', function() {
  img.classList.remove('fade-out');
  img.classList.add('fade-in');
})

txt.addEventListener('mouseout', function(){
  img.classList.remove('fade-in');
  img.classList.add('fade-out');
})

Thanks for help and any tips !

Does this answer your question? [Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery](https://stackoverflow.com/questions/7861648/animate-an-elements-width-from-0-to-100-with-it-and-its-wrapper-being-only-a) — Awais, Jan 23 '20 at 11:53
No it doesn't.. check the hover effect on the example I showed :/ — mmalak, Jan 23 '20 at 12:22

score 1 · Accepted Answer · answered Jan 23 '20 at 12:52

Here is the general demo for what you need simple by using left and right properties

.underline {
  display: inline;
  position: relative;
  overflow: hidden;
}
.underline:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 0;
  bottom: -5px;
  background: #000;
  height: 4px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
  left: 0;
  right: auto;
  width: 100%;
}

<p>hello, <a href="#" class="underline">Please animate</a>
</p>

that's exactly what I've been looking for ! thank you – mmalak Jan 23 '20 at 12:59 — mmalak, Jan 23 '20 at 12:59

CSS animation expand width from 0 to 100 and hide from 0 to 100

1 Answers1