JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<div class="image-holder">
  <img src="https://www.muralswallpaper.co.uk/app/uploads/Safari-Kids-Map-Wallpaper-Mural-Room-825x535.jpg" width="825" height="535" />
  
  <div class="marker marker-1"></div>
  <div class="marker marker-2"></div>
</div>

CSS

img {
  max-width: 100%;
  height: auto;
}

.image-holder {
  position: relative;
}

.marker {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: red;
  left: -15px;
  top: -15px;
  bottom: auto;
  right: auto;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.marker-1 {
  transform: translate3d(10%, 30%, 0px);
}

.marker-2 {
  transform: translate3d(50%, 60%, 0px);
}

JavaScript

handler = new Hammer($('.image-holder').get(0))
handler.on('tap', function(e) {
	const wrapper = $('.image-holder').get(0).getBoundingClientRect();
  const marker = $('.marker-1').get(0).getBoundingClientRect();

  
  console.log(wrapper.width)
  console.log(e.center.x)
  
  
  const percentage = e.center.x - wrapper.left;
  
  console.log(percentage)
  
  var transform = "translate3d(" + percentage + "px,0,0)";
  $('.marker-1').get(0).style.transform = transform;
});