bhumiraj parmar bhumiraj parmar - 3 months ago 14
CSS Question

how to Zoom only outer div not inner divs

I zoom a

div
using
-moz-transform: scale(3.2)
, but I only want to zoom the outer div and not the content (other divc) within that div.

here is my code

<div id="div1" style="-moz-transform: scale(3.2);" >
<div id="div2">
content
</div>
</div>




Here I zoom the
div1
, however
div2
also zooms. I only want to zoom
div1
but not
div2
, meaning that the content of
div2
will still be displayed as is.

Answer

You can add -moz-transform: scale(0.3125) to offset the parent scale. Basically 0.3125 = 1 / 3.2 where 3.2 is the scale factor applied to the parent.

<div id="div1" style="-moz-transform: scale(3.2);-webkit-transform: scale(3.2); transform: scale(3.2);" >
         <div id="div2" style="-moz-transform: scale(.3125);-webkit-transform: scale(.3125); transform: scale(.3125);">
             content
           </div>
  </div>