title: my code doesn't look the way I want
body: <p>here is a code I have written. it works fine but it has a small problem.
  when I push the zoom button to zoom on a picture. picture becomes bigger and covers the buttons. how can I fix this problem?(i want my pictures grow when I push the zoom button but I don't want them to cover the button)</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>var images = document.querySelectorAll('img.images');
  var displayCount = 0;
  var hideCount = 0;
  document.getElementById('display').onclick = function() {
    if (hideCount &lt; images.length) {
      images[hideCount].style.display = 'none';
      zoomOut(images[hideCount]);
      hideCount++;
    } else {
      images[displayCount].style.display = 'block';
      zoomOut(images[displayCount]);
      displayCount++;
      if (displayCount === images.length) {
        displayCount = 0;
        hideCount = 0;
      }
    }
  }
  document.getElementById('zoombtn').onclick = function() {
    if (hideCount &gt; 0) {
      images[hideCount - 1].style.display = 'block';
      zoomIn(images[hideCount - 1]);
      hideCount--;
    } else {
      images[11].style.display = 'block';
      zoomIn(images[11]);
    }
  }
  
  function zoomIn(zElement) {
    var element = document.getElementById(zElement.id);
    element.style.transform = "scale(2)";
    //element.style.width *= 2;
  }
  
  function zoomOut(zElement) {
    var element = document.getElementById(zElement.id);
    element.style.transform = "scale(1)";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.botton {
    height: 30px;
    width: 405px;
  }
  
  .table {
    margin-left: 0;
    text-align: center;
  }
  
  h3 {
    margin-left: 325px;
  }
  
  h4 {
    margin-left: 290px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="botton" ; id="display" ;&gt;Display&lt;/button&gt;
  &lt;button class="botton" ; id="zoombtn" ;&gt;Zoom&lt;/button&gt;
  &lt;br&gt;&lt;/br&gt;
  &lt;table class="table"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;img SRC="blfy.gif" ALT="Butterflies" id="image-1" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;img SRC="eye.gif" ALT="Eye" id="image-2" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;img SRC="wave.gif" ALT="Wave" id="image-3" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="jungle.gif" ALT="Jungle" id="image-4" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;IMG SRC="bridge.gif" ALT="Bridge" id="image-5" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="duck.gif" ALT="Duck" id="image-6" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="egg.gif" ALT="Eggs" id="image-7" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="aurora.gif" ALT="Aurora" id="image-8" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;IMG SRC="it.gif" ALT="Technology" id="image-9" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="hill.gif" ALT="Hills" id="image-10" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="string.gif" ALT="strings" id="image-11" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;IMG SRC="vegi.gif" ALT="vegetables" id="image-12" class="images" height="200" width="200" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>