title: CSS animation expand width from 0 to 100 and hide from 0 to 100
body: <p>I was trying to figure it out how the things are done on this webpage <a href="http://www.olivierophotographie.fr/#/projects" rel="nofollow noreferrer">hover effect on projects</a>. 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:</p>
  
  <pre><code>HTML
  &lt;div class="text"&gt;Simple text&lt;/div&gt;
  &lt;div class="img"&gt;&lt;/div&gt;
  
  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;
  
    &amp;.fade-in{
      animation: .5s linear fadein forwards;
    }
  
    &amp;.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');
  })
  </code></pre>
  
  <p>Thanks for help and any tips !</p>