title: zoom an image on button click
body: <p>I have a code for an image that if you tap on it zooms out and if you tap on any where out side the box of the image it zooms back. is there I can control the zooming with a button such that one button zooms incrementally and the other zooms in decrementally. this is my attempt</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt; 
    &lt;style type="text/css"&gt;
      .zoomin img { height: 200px; width: 200px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease; }
      .zoomin img:hover { width: 300px; height: 300px; } 
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="zoomin"&gt; 
       &lt;img src="download.jpg" title="All you need to know about CSS Transitions " /&gt; 
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  &lt;button&gt;plus&lt;/button&gt;
  &lt;button&gt;minus&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what better way could this be achieved</p>