How to zoom out a div using animations?

Question

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 width and height (let's say 100 * 100px for example).

I am starting with the following code:

<div id="toBeZoomedOut">
  <div>something</div>
  <div><img src="background.jpg"></div>
</div>

#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;
}

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.

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).

I understand this might be easier with JavaScript? Any help?

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.

JSFiddle link to make it easier: http://jsfiddle.net/HU46s/

Answer 1

I am using the universal selector to target everything inside of the parent container to have the css transitions applied to it.

The next thing I did was changed the inside contents width to a % for ease of scaling.

Here is the css:

#toBeZoomedOut * {
   -webkit-transition: all 1s ease;
   -moz-transition: 1s ease;
   transition: 1s ease;
}

Finally, a fiddle: Demo

Answer 2

To make all images and div backgrounds zoom at the same time you have to use percentage size for #zoomer-inside elements and set a specific font-sizes...

However is not smooth, if you want a smoother result, I suggest you use a jQuery in combination with some animation() method or plugin.

Fiddle: http://jsfiddle.net/HU46s/1/

Code:

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
   width: 90%;
   font-size: 20px;
}
#toBeZoomedOut img {
   height: 90%;
   width: 90%;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}

smoother by jQuery:

Fiddle: http://jsfiddle.net/HU46s/5/

Code: jQuery - smoother solution (even less CSS):

 $('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
     function(){
        $(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
     },
     function(){
        $(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
     }
 );

...with this only CSS you need is:

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
}

#toBeZoomedOut img {
   width: 250px;
}