<h1 class="effect-1" data-text="Text">Text</h1>

* {
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0;
    padding: 0;
    color: #ccc;
    font-size: 5em;
    overflow: hidden;
    text-align: center;
    text-transform: uppercase;
}
/* Fill Text Effect On Hover - Css3 */
h1.effect-1 {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  
  &:before {
    top: 0;
    left: 0;
    width: 0;
    color: #262626;
    overflow: hidden;
    position: absolute;
    content: attr(data-text);
    transition: all 0.9s;
  }
  
  &:hover {
    
    &:before {
      width: 100%;
    }
  }
}