JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="hotspot">
  <img src="https://i.imgur.com/jiImOV4.jpg" class="hotspot-img " />
  <img src="https://i.imgur.com/HxpSuX7.png" class="hotspot-icon " />
</div>

CSS

.hotspot {
  overflow: hidden;
  position: absolute;
  height: 100vh;
  left: 50%;
  transform: translate(-50%, 0);
}

.hotspot:hover {
  cursor: url('https://i.imgur.com/HxpSuX7.png') 60 41, auto;
}

.hotspot-img {
  display: block;
  height: 100%;
  position: relative;
}

.hotspot-icon {
  display: none;
  width: 120px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

JavaScript

$('.hotspot-img').on('click', function(e) {
  var offset 		= $(this).offset(),
    	relativeX = e.pageX - offset.left,
    	relativeY = e.pageY - offset.top;
  var height 		= $(this).height(),
    	width 		= $(this).width();
  let hotspot = {
    x: relativeX / width * 100,
    y: relativeY / height * 100
  }
  $(this).next('.hotspot-icon').css({
    'display'	: 'block',
    'top'			: hotspot.y + '%',
    'left'		: hotspot.x + '%'
  });
});