JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child">Hover me!</div>
</div>

CSS

.parent { position: relative; height: 250px}
.child:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: .15;
}
.child:hover:before { opacity: .5; }

JavaScript

$(document).ready(function(){
	
   
	$(".child").on({mouseenter:	function(){	   
	       $(this).parent().fadeOut(200, function(){
		       $(this).css("background-image", "url(https://www.w3schools.com/html/img_chania.jpg)");
		       $(this).css('background-repeat', 'no-repeat');
		     });	    
  	     $(this).parent().fadeIn(200, function(){
		       $(this).css("background-image", "url(https://www.w3schools.com/html/img_chania.jpg)");
		       $(this).css('background-repeat', 'no-repeat');
		     });       		
	}, 
    mouseleave: function(){ 	   
    $(this).parent().fadeOut(200, function(){
		 $(this).css("background-image", "url(https://www.w3schools.com/html/pulpitrock.jpg)");
		 $(this).css('background-repeat', 'no-repeat');
		});		
  	    $(this).parent().fadeIn(200, function(){
		 $(this).css("background-image", "url(https://www.w3schools.com/html/pulpitrock.jpg)");
		 $(this).css('background-repeat', 'no-repeat');
		});	
	
  }
  });
  });