JSFiddle - React, Tailwind, and code Playground

HTML

<img class="testImageBottom" src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="test">

<img class="testImageTop" src="https://images.unsplash.com/photo-1472396961693-142e6e269027?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=952&q=80" alt="test">

CSS

img {
  position: absolute;
}

.testImageBottom {
  width: 400px;
}

.testImageTop {
  width: 200px;
  opacity: .5;
}

JavaScript

document.querySelector(".testImageBottom").addEventListener('mouseenter', () => {
	console.log("trigger: mouseenter");
});
	
document.querySelector(".testImageBottom").addEventListener('mouseleave', () => {
	console.log("trigger: mouseleave");
});