JSFiddle - React, Tailwind, and code Playground

HTML

<span class="hf-4"></span>

CSS

.hf-4
{
    width: 120px;
    height: 120px;
    float: left;
    display: block;
    position: relative;
    z-index: 11;
}


.hf-4{
    background: url(http://projects.neonandsons.com/dev/lsnc/wp-content/themes/lsnc/images/people/4.jpg) no-repeat left top;
}

JavaScript

$(".hf-1").hover(
            function () {
                    $(this).css("background-position","0 -121px");
                    $(".hf-2").css("background-position","0 -242px");
                    $(".hf-3").css("background-position","0 -363px");
                    $(".hf-4").css("background-position","0 -484px");
                  },
            function () {}
);
                

$(".hf-2").hover(
            function () {
                    $(this).css("background-position","0 -121px");
                    $(".hf-2").css("background-position","0 -363px");
                    $(".hf-3").css("background-position","0 -484px");
                    $(".hf-4").css("background-position","0 -242px");
                  },
            function () {}
);