title: Select image and magnify selected image
body: <p>I am experimenting with images gallery as a tab and magnification.</p>
  <p>Here is the current code I have.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;style&gt;
  .img-zoom-container {
    position: relative;
    width: 300px;
    height: 300px;
  }
  
  .img-zoom-lens {
    position: absolute;
    width: 40px;
    height: 40px;
  }
  
  .img-zoom-result {
    width: 300px;
    height: 300px;
  }
  #myimage:hover{
      opacity: 0;
  }
  .tabcontent {
    display: none;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;
    img = document.getElementById(imgID);
    result = document.getElementById(resultID);
    /*create lens:*/
    lens = document.createElement(&quot;DIV&quot;);
    lens.setAttribute(&quot;class&quot;, &quot;img-zoom-lens&quot;);
    /*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 = &quot;url('&quot; + img.src + &quot;')&quot;;
    result.style.backgroundSize = (img.width * cx) + &quot;px &quot; + (img.height * cy) + &quot;px&quot;;
    /*execute a function when someone moves the cursor over the image, or the lens:*/
    lens.addEventListener(&quot;mousemove&quot;, moveLens);
    img.addEventListener(&quot;mousemove&quot;, moveLens);
    /*and also for touch screens:*/
    lens.addEventListener(&quot;touchmove&quot;, moveLens);
    img.addEventListener(&quot;touchmove&quot;, 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 + &quot;px&quot;;
      lens.style.top = y + &quot;px&quot;;
      /*display what the lens &quot;sees&quot;:*/
      result.style.backgroundPosition = &quot;-&quot; + (x * cx) + &quot;px -&quot; + (y * cy) + &quot;px&quot;;
    }
    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};
    }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;img-zoom-container&quot;&gt;
      &lt;div id=&quot;myresult&quot; class=&quot;img-zoom-result&quot;&gt;
          &lt;div id=&quot;1&quot; class=&quot;tabcontent&quot;&gt;
              &lt;img id=&quot;myimage&quot; src=&quot;cdn/images/products/1605983270.webp-300x300.webp&quot; width=&quot;300px&quot; height=&quot;300px&quot;&gt;
          &lt;/div&gt;
          &lt;div id=&quot;2&quot; class=&quot;tabcontent&quot;&gt;
              &lt;img id=&quot;myimage2&quot; src=&quot;cdn/images/products/1606254469.webp-300x300.webp&quot; width=&quot;300px&quot; height=&quot;300px&quot;&gt;
          &lt;/div&gt;
          &lt;div id=&quot;3&quot; class=&quot;tabcontent&quot;&gt;
              &lt;img id=&quot;myimage3&quot; src=&quot;cdn/images/products/1606251762.webp-300x300.webp&quot; width=&quot;300px&quot; height=&quot;300px&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;img onclick=&quot;openCity(event, '1')&quot; id=&quot;defaultOpen&quot; src=&quot;cdn/images/products/1605983270.webp-50x50.webp&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;
      &lt;img onclick=&quot;openCity(event, '2')&quot; src=&quot;cdn/images/products/1606254469.webp-50x50.webp&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;
      &lt;img onclick=&quot;openCity(event, '3')&quot; src=&quot;cdn/images/products/1606251762.webp-50x50.webp&quot; width=&quot;50px&quot; height=&quot;50px&quot;&gt;
  &lt;script&gt;
  imageZoom(&quot;myimage&quot;, &quot;myresult&quot;);
  imageZoom(&quot;myimage2&quot;, &quot;myresult&quot;);
  imageZoom(&quot;myimage3&quot;, &quot;myresult&quot;);
  function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName(&quot;tabcontent&quot;);
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = &quot;none&quot;;
    }
    tablinks = document.getElementsByClassName(&quot;tablinks&quot;);
    for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(&quot; active&quot;, &quot;&quot;);
    }
    document.getElementById(cityName).style.display = &quot;block&quot;;
    evt.currentTarget.className += &quot; active&quot;;
  }
  document.getElementById(&quot;defaultOpen&quot;).click();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I can get either function but not both working at the same time.</p>
  <p>I am trying to achieve the effect that I could simply hover over the current selected image to magnify.</p>
  <p>My broken example can be found here.</p>
  <p><a href="https://smokeology.ca/test.html" rel="nofollow noreferrer">https://smokeology.ca/test.html</a></p>
  <p>What am I doing wrong?</p>