JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    
    <div id="john" class="character normalClassName1">
        <a href="#" id="link1">&nbsp;</a>
    </div>	
    
    <div id="steve" class="character">
        <img src="http://placehold.it/400x400" />
    </div>
    
</div>

CSS

#container {width:100%;background:rgba(255,0,0,1);float:left;height:450px}

#john {position:relative;margin-top:-80px;margin-left:0px;background:blue;height:380px;float:left;width: 495px;}
#john div {margin-left:250px;width:180px;height:float:left;margin-top:205px}
#john div p {color:#074471;font-weight:bold;font-size:13px;margin-left:20px;}

#steve img {float:left}

#link1 {background:transparent;position:absolute;top:0px;left:0;width:100%;height:100%;z-index:1}

.normalClassName1 {
    width:495px!important;
    z-index:3;
} 
.hoverClassName1 {
    width:495px;
    z-index:4!important
}

#container.test {
    background:rgba(255,0,0,.5)
}

JavaScript

$(function() {
    $('#john').mouseenter(function() {
        $('#container').addClass("test");
    }).mouseleave(function () {
        $('#container').removeClass("test");
    });
});