JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div id="box">
      <div class="area">
        <img src="https://i.imgur.com/TrfyxqD.jpg" alt="">
      </div>
    </div>

CSS

:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

#box {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: pink;
  overflow: hidden;
}

.area {
  position: absolute;
  width: 700px;
  height: 700px;
  top: 0; left: 0;
}

.area img {
  width: 100%;
  height: 100%;
}

JavaScript

let root = document.documentElement;
let hotjarGraphic = document.getElementById("box");


hotjarGraphic.addEventListener("mousemove", e => {
  console.log(e);
  root.style.setProperty('--mouse-x', e.pageX - hotjarGraphic.offsetLeft + "px");
  root.style.setProperty('--mouse-y', e.pageY - hotjarGraphic.offsetTop + "px");
});