title: Mouse hover zoom image to be only shown when mouse hovered
body: <p>I have made this mouse hover image zoom page. But I want the output to be shown on the left side and only when someone hovers the mouse on it. In this code the output window is continuously opened.</p>
  <p>HERE IS MY CODE:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;
    img = document.getElementById(imgID);
    result = document.getElementById(resultID);
    /*create lens:*/
    lens = document.createElement("DIV");
    lens.setAttribute("class", "img-zoom-lens");
    /*insert lens:*/
    img.parentElement.insertBefore(lens, img);
    /*calculate the ratio between result DIV and lens:*/
    cx = result.offsetWidth / lens.offsetWidth;
    cy = result.offsetHeight / lens.offsetHeight;
    /*set background properties for the result DIV:*/
    result.style.backgroundImage = "url('" + img.src + "')";
    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
    /*execute a function when someone moves the cursor over the image, or the lens:*/
    lens.addEventListener("mousemove", moveLens);
    img.addEventListener("mousemove", moveLens);
    /*and also for touch screens:*/
    lens.addEventListener("touchmove", moveLens);
    img.addEventListener("touchmove", moveLens);
  
    function moveLens(e) {
      var pos, x, y;
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      /*get the cursor's x and y positions:*/
      pos = getCursorPos(e);
      /*calculate the position of the lens:*/
      x = pos.x - (lens.offsetWidth / 2);
      y = pos.y - (lens.offsetHeight / 2);
      /*prevent the lens from being positioned outside the image:*/
      if (x &gt; img.width - lens.offsetWidth) {
        x = img.width - lens.offsetWidth;
      }
      if (x &lt; 0) {
        x = 0;
      }
      if (y &gt; img.height - lens.offsetHeight) {
        y = img.height - lens.offsetHeight;
      }
      if (y &lt; 0) {
        y = 0;
      }
      /*set the position of the lens:*/
      lens.style.left = x + "px";
      lens.style.top = y + "px";
      /*display what the lens "sees":*/
      result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
    }
  
    function getCursorPos(e) {
      var a, x = 0,
        y = 0;
      e = e || window.event;
      /*get the x and y positions of the image:*/
      a = img.getBoundingClientRect();
      /*calculate the cursor's x and y coordinates, relative to the image:*/
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return {
        x: x,
        y: y
      };
    }
  }
  
  // Initiate zoom effect:
  imageZoom("myimage", "myresult");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  .img-zoom-container {
    position: relative;
  }
  
  .img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    /*set the size of the lens:*/
    width: 40px;
    height: 40px;
  }
  
  .img-zoom-result {
    border: 1px solid #d4d4d4;
    /*set the size of the result div:*/
    width: 300px;
    height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Image Zoom&lt;/h1&gt;
  
  &lt;p&gt;Mouse over the image:&lt;/p&gt;
  
  &lt;div class="img-zoom-container"&gt;
    &lt;img id="myimage" src="img_girl.jpg" width="300" height="240"&gt;
    &lt;div id="myresult" class="img-zoom-result"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;The image must be placed inside a container with relative positioning.&lt;/p&gt;
  &lt;p&gt;The result can be put anywhere on the page, but must have the class name "img-zoom-result".&lt;/p&gt;
  &lt;p&gt;Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The code is working perfectly, but the result should be on the right and it should be only shown when user hovers the mouse on it.</p>