title: Zoom Vs. Scale in CSS3
body: <p>I was looking for some css properties that I never used and came to know about <code>zoom</code> property of <strong>css3</strong></p>
  
  <ul>
  <li><p>What is the similarities and difference between them?</p></li>
  <li><p>When to use Zoom and when scale? Both do pretty much the same job.</p></li>
  <li><p>Which is more efficient to use and why?</p></li>
  </ul>
  
  <h2>What have I noticed?</h2>
  
  <ul>
  <li><p>both scales the object but default transform-origin for scale its center and for zoom its top-left I think;</p></li>
  <li><p>when we use them for scaling on hover, zoom will scale and again shrinks to the original dimension, while scale will only shrink on hover-out.
  <a href="http://jsfiddle.net/KkpyY/" rel="noreferrer">-->> jsfiddle showing hover effectst</a>** </p></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*
  {
      -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -ms-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
  }
  
  box, box2
  {
      display: inline-block;
      width: 100px;
      height: 100px;
      
      margin: 20px;
  }
  
  box
  {
      background: #b00;
  }
  
  box:hover
  {
      zoom: 1.1;
  }
  
  box2
  {
      background: #00b;
  }
  
  box2:hover
  {
      -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;box&gt;&lt;/box&gt;
  &lt;box2&gt;&lt;/box2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h2>Some Stackoverflow QA</h2>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css">What Does 'zoom' do in CSS?</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/22279757/zoom-versus-transform-scale">Zoom versus -transform scale</a></p></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    display: inline-block;
    height: 50px;
    width: 50px;
  }
  .one {
    background: #07a;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    transform-origin: top top;
  }
  .two {
    background: #eee;
    zoom: 200%;
    margin-left:100px;
  }
  
  .three {
    background: #07a;
    transform-origin: top left;
    transition:all 0.6s ease;
  }
  
  .three:hover{
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
  
  .four {
    background: #eee;
    transition:all 0.6s ease;
  }
  
  .four:hover{
    zoom: 200%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h4&gt;Already zoomed and scalled&lt;/h4&gt;
  &lt;div class="one"&gt;&lt;/div&gt;
  &lt;div class="two"&gt;&lt;/div&gt;
  &lt;hr&gt;
  &lt;h4&gt;Zoomed and Scalled on hover&lt;/h4&gt;
  &lt;div class="three"&gt;&lt;/div&gt;
  &lt;div class="four"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>