title: Pure Javascript How to Zoom Image on mousemove?
body: <p>I'm trying to create onmousemove event inside the image then show the zoomed image in the right side.</p>
  <p>Problem:</p>
  <ol>
  <li>When I try to mousemove inside the image, the black box and zoomed image are blinking.</li>
  <li>The zoomed image is not match in the blackbox.</li>
  </ol>
  <p>How do I do that? May computation is wrong.</p>
  <p>This is my code.</p>
  <pre><code>&lt;div&gt;
      &lt;div id=&quot;cursor&quot; style=&quot;background:black; opacity:0.5; width:100px; height:100px; position:absolute; display:none&quot;&gt;
      
      &lt;/div&gt;
      &lt;div style=&quot;float:left;&quot;&gt;
          &lt;img id=&quot;img&quot; src=&quot;http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg&quot; onmousemove=&quot;getPos(event)&quot; onmouseout=&quot;stopTracking()&quot;/&gt;
      &lt;/div&gt;
      &lt;div id=&quot;zoom&quot; style=&quot;width:300px; height:300px; zoom:1; float:left;&quot;&gt;
          qwe
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      function getPos(e){
          var x = e.clientX;
          var y = e.clientY;
          var width = document.getElementById(&quot;img&quot;).clientWidth;
          var height = document.getElementById(&quot;img&quot;).clientHeight;
          
          document.getElementById(&quot;cursor&quot;).style.left = x - 50;
          document.getElementById(&quot;cursor&quot;).style.top = y - 50;
          document.getElementById(&quot;cursor&quot;).style.display = &quot;inline-block&quot;;
          
          document.getElementById(&quot;zoom&quot;).style.background = &quot;url('http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg') &quot;+x / width * 100+&quot;% &quot;+y / width * 100+&quot;%&quot;;
      }
  
      function stopTracking(){
          document.getElementById(&quot;cursor&quot;).style.display = &quot;none&quot;;
          document.getElementById(&quot;zoom&quot;).style.background = &quot;transparent&quot;;
      }
  &lt;/script&gt;
  </code></pre>