JSFiddle - React, Tailwind, and code Playground

HTML

<p></p>
<div>
        <span id="Div1"></span>
        <span id="Div2"></span>
        <span id="Div3"></span>
        <span id="Div4"></span>
    </div>

CSS

div {
            display: block;
            margin: 0 auto;
            overflow: hidden;
            width: 950px;
        }
        span {
            display: block;
            position: absolute;
            opacity: 0.5;
            border-radius: 999px;
            z-index: 1;
        }
        #Div1 {
            background-color: #FF0000;
            height: 200px;
            left: 50px;
            top: 80px;
            width: 200px;
        }
        #Div2 {
            background-color: #0000FF;
            height: 150px;
            left: 40px;
            top: 230px;
            width: 150px;
        }
        #Div3 {
            background-color: #008000;
            height: 250px;
            left: 100px;
            top: 190px;
            width: 250px;
        }
        #Div4 {
            background-color: #FFFF00;
            height: 100px;
            left: 200px;
            top: 130px;
            width: 100px;
        }

JavaScript

$(document).ready(function () {
    $("#Div1").hover(
        function () {  
            $(this).addClass("is-over");
        },
        function () {
            $(this).removeClass("is-over");
        }
    );
    $("#Div2").hover(
        function () {
            $(this).addClass("is-over");
        },
        function () {
            $(this).removeClass("is-over");
        }
    );
    $("#Div3").hover(
        function () {
            $(this).addClass("is-over");
        },
        function () {
            $(this).removeClass("is-over");
        }
    );
    $("#Div4").hover(
        function () {
            $(this).addClass("is-over");
        },
        function () {
            $(this).removeClass("is-over");
        }
    );
});