JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="coloured">
        abcdefghijklmnopqrstuvwxyz
    </div>
    <div id="plain">
        abcdefghijklmnopqrstuvwxyz
    </div>
</div>

CSS

#container {
    font-size:40px;
    position:relative;
    background-color:#CCC;
    width:450px;
    height:40px;
}
#coloured {
    position:absolute;
    z-index:2;
    top:0px;
    left:0px;
    display:block;
    width:0%;
     -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    color:red;
    overflow:hidden;
}
#container:hover #coloured {
    width:100%;
}
#plain {
    position:absolute;
    z-index:1;
    width:100%;
    display:block;
    top:0px;
    left:0px;
    color:black;
}