CSS highlighting div

Question

I have a DIV that covers the whole page (height and width 100%). I am trying to use CSS (and possibly JavaScript) to create a zoom out effect, so the DIV is smaller (which makes everything inside a div - its children - smaller) to a specific point on the page (in the middle of the page) and to the specific widthand height(say, 100 * 100px, for example).

I start 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 problem with this code is that it scales on the down component (the parent div) and immediately scales what returns inside it to increase the components.

. - , ? , / (, : 100 , : 100 , div : 100 * 100 ).

, JavaScript? ?

, , . , .

:)

jsfiddle, : http://jsfiddle.net/HU46s/

Answer 1

, css-.

, , - % .

css:

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

, :

Answer 2

, # , , ...

, , jQuery () .

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

:

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

jQuery:

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

: jQuery - ( 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 !
     }
 );

... CSS :

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

#toBeZoomedOut img {
   width: 250px;
}