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:red;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
		}

JavaScript

$(function() {
			$('#john').mouseenter(function() {
				$(this).addClass('hoverClassName1');
				$('.character[id!=john]').css({opacity:0.5});
				
				var button = $(this).find('.button');
				
				button.html('View more');
				
			}).mouseleave(function () {
				$('.hoverClassName1').removeClass('hoverClassName1');
				$('.character').css({opacity:1});
				
				$('.button').html('View');
			});
		});