JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow" id="link1">
    <img class="bellow" src="http://lorempixel.com/400/200/" width="305" height="229" />
</div>

CSS

.arrow {
    display: block;
    width: 305px;
    height: 229px;
    position:relative;
    /*background-image: url(top.png);*/
    background: red;
}
#link1 {
    background-position: 0 458PX;
    position:absolute;
}
#link1:hover {
    background-position: 0 229px;
    position:absolute;
}
.bellow {
    z-index: -1;
    position:absolute;
}