JSFiddle - React, Tailwind, and code Playground

HTML

<div class='main'>
		<img src='http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png' alt=''/>
		<div class='overlay'></div>
	</div>
	<div class='main'>
		<img src='http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png' alt=''/>
		<div class='overlay withbackground'></div>
	</div>

<div class='pageX'></div>

CSS

.main {
			display:inline-block;
			position: relative;
		}

		.overlay {
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			border:1px solid #f00;
		}

		.withbackground {
			background:blue;
		}

JavaScript

$('.overlay').mousemove(function(e){
  $('.pageX').text('pageX: '+e.pageX);
});