title: How to zoom out a div using animations?
body: <p>I have a DIV that is covering the whole page (height and width are 100%). I am trying to use CSS (and possibly JavaScript) to create a zoom out animation effect so the DIV is smaller (making everything inside the div - its children - smaller as well) to a specific point on the page (middle of the page) and to a specific <code>width</code> and <code>height</code> (let's say 100 * 100px for example).</p>
  
  <p>I am starting with the following code:</p>
  
  <pre><code>&lt;div id="toBeZoomedOut"&gt;
    &lt;div&gt;something&lt;/div&gt;
    &lt;div&gt;&lt;img src="background.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  #toBeZoomedOut {
     background-color: black;
     border: 1px solid #AAAAAA;
     color: white;
     width: 300px;
     height: 300px;
     margin-left: auto;
     margin-right: auto;
     -webkit-transition: 1s ease-in-out;
     -moz-transition: 1s ease-in-out;
     transition: 1s ease-in-out;
  }
  
  #toBeZoomedOut img {
     height: 250px;
     width: 250px;
  }
  
  #toBeZoomedOut:hover {
     zoom: 0.5;
  }
  </code></pre>
  
  <p>The issue with this code is that it zooms out on component down (the parent div) and immediately zooms out what's inside it then goes back to zoom in the components. </p>
  
  <p>Basically it is a little buggy. Any helpful fixes to make it zoom out everything together? It would be great if I can zoom out everything together to a specific location on the page and to a specific width/height (for example, zoom everything out to left: 100px, top: 100px and the parent div should be: 100px * 100px and everything else is relative in size).</p>
  
  <p>I understand this might be easier with JavaScript? Any help?</p>
  
  <p>One final note, if you notice the animation is not really reflecting a zoom animation. Although this would be an additional plus, the actual zoom animation would be great.</p>
  
  <p>JSFiddle link to make it easier: <a href="http://jsfiddle.net/HU46s/" rel="nofollow noreferrer">http://jsfiddle.net/HU46s/</a></p>