JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow" id="link1">
    </div>
<img class="bellow" src="bottom.jpg" width="305" height="229" />

CSS

.arrow{
display: block;
width: 305px;
height: 229px;
z-index:10;
    position:relative;    
background-image: url(top.png);
}

#link1{
    background-color:red;
background-position: 0 458PX;
z-index:10;
position:absolute;
}
#link1:hover{
    background-color:blue;
background-position: 0 229px;
z-index:10;
position:absolute;
}
.bellow{
    z-index:1;
position:absolute;
    background-color:green;
}