JSFiddle - React, Tailwind, and code Playground

by vals

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;
 background-position: 0% 0%;
 width: 100%; 
 height: 100px; 
 position:absolute; 
 left:0;
 top:0px;
 -webkit-transition: all 3s;
 transition: all 3s;
}

#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; 
 position:absolute; 
 left:0; 
 top:0;
}

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

#firstLayer {
 -webkit-mask-position: -15% 0px;      
 -webkit-mask-size: 84px 100%;      
 -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
 -webkit-mask-repeat: no-repeat;
}
#thirdLayer:hover ~ #firstLayer {
 -webkit-mask-position: 52% 0px;      
}