JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent" onmousedown="itTouched()" onmouseup="itTouched()"> <div id="circle"> </div> </div>

CSS

#parent {
    height: 200px;
    width: 400px;
    background-color: lightgray;
}

#circle {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0 0;
    height: 200px;
    width: 400px;
    transition: background-size .3s ease-in;
}

#parent:active #circle {
    background-size: 1200px 1200px;
}

JavaScript

document.onmousemove = getMouseXY; 
var tempX = 0; 
var tempY = 0; 

function getMouseXY(e) { 
  tempX = e.clientX + document.body.scrollLeft; 
  tempY = e.clientY + document.body.scrollTop; 
}

function itTouched() {
  var someElement = document.getElementById("parent")
  var circle = document.getElementById("circle");
  
  var xValue = getPos(someElement).x + (someElement.offsetWidth / 2) - tempX;
  var yValue = getPos(someElement).y + (someElement.offsetHeight / 2) - tempY;
  
  var theString = "background-position: calc(50% - " + xValue + "px)" + " calc(50% - " + yValue + "px);";
    
  
  circle.setAttribute("style", theString);
}

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}