Images are not trailing mouse
<p>I am trying to make an image get attached to the mouse and it isn't showing up correctly when I hover over the image. I need to make it so that the image preview that is trailing the mouse and is larger on the mouse preview.Could you please help me?</p>

<p>Here is the fiddle:</p>

<p><a href="https://jsfiddle.net/pgyt1qpg/1/" rel="nofollow">https://jsfiddle.net/pgyt1qpg/1/</a></p>

<p>here is the code:</p>

<pre><code>document.querySelector('.container').addEventListener('mouseover', function(e) {
  e.preventDefault();
  if (e.target.tagName === 'IMG') {

    //create the div tag for preview
    var myElement = document.createElement('div');
    myElement.className = 'preview';
    e.target.parentNode.appendChild(myElement);
    //Create the image element for preview
    var myImg = document.createElement('img');
    var imgLoc = e.target.src;
    myImg.src = imgLoc;

    myElement.style.left = e.offsetX + 15 + 'px';
    myElement.style.top = e.offsetY + 15 + 'px';
    myImg.style.width = "500px";
    myImg.style.height = "500px";
    myElement.style.zIndex = "-1";
    myElement.appendChild(myImg);

    //When mouse goes out of the image delete the preview
    e.target.addEventListener('mouseout', function handler(d) {
      var myNode = d.target.parentNode.querySelector('div.preview');
      myNode.parentNode.removeChild(myNode);
      e.target.removeEventListener('mouseout', handler, false);
    }, false);

    //place the image 15 inches to the bottom, right of the mouse
    e.target.addEventListener('mousemove', function(f) {
      myElement.style.left = f.offsetX + 15 + 'px';
      myElement.style.top = f.offsetY + 15 + 'px';
    });

  }
}, false);
</code></pre>

<p>UPDATE:</p>

<p>I have updated the fiddle (many thanks to peter) and the image is on the right side now. I just need to make it closer to the mouse. How do I go about doing that?</p>