JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="firstLayer"></div>
<div id="secondLayer"></div>

CSS

#firstLayer {
 background-image:linear-gradient(90deg,white,black), linear-gradient(90deg,red,red);
 background-size: 1000% 40%, 1000% 100%;
 background-repeat: no-repeat;
 backgrond-position: -10% 0%;
 width: 10%; 
 height: 100px; 
 position:absolute; 
 left:-10%;
 top:0;
 -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%;
}

#thirdLayer:hover ~ #firstLayer {
    left: 47%;
    background-position: 47% 0%, 47% 0%;
}