JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thirdLayer">hover me</div>
<div id="secondLayer"></div>
<div id="firstLayer"></div>

CSS

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0;
 clip: rect(10px,0px,80px,0px);
 -webkit-transition: all 2s;
}

#secondLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,blue,blue);
 background-size: 100% 40%, 100% 100%;
 background-repeat: no-repeat;
 width: 100%; 
 height: 100px; 
 min-width:900px; 
 position:absolute; 
 left:0; 
 top:0
}

#thirdLayer {
 position:absolute; 
 top: 110px; 
 left: 50%;
}