What Does zoom do in CSS

Question

I found that some jQuery Plugin  in their css rule uses  zoom  descriptor  I even Look into w3c website and found that it is used to magnify but how can I actually implement it  Or I have to Define some viewport  And how do I define such viewport   Or i am wrong about the whole stuff    is it possible to use it like   a       zoom 1     a hover      zoom 2

User · Answer

CSS zoom property is widely supported now   86  of total browser population   See  http   caniuse com  search zoom   x000D   x000D  document querySelector   sel-jsz   style zoom   4  x000D   sel-001   x000D    zoom  2 5  x000D    x000D   sel-002   x000D    zoom  5  x000D    x000D   sel-003   x000D    zoom  300   x000D    x000D   lt div id  sel-000  gt IMG - Default lt  div gt  x000D   x000D   lt div id  sel-001  gt IMG - 1X lt  div gt  x000D   x000D   lt div id  sel-002  gt IMG - 5X lt  div gt  x000D   x000D   lt div id  sel-003  gt IMG - 3X lt  div gt  x000D   x000D   x000D   lt div id  sel-jsz  gt JS Zoom - 4x lt  div gt  x000D   x000D   x000D

User · Answer

This property controls the magnification level for the current element  The rendering effect for the element is that of a    zoom    function on a camera  Even though this property is not inherited  it still affects the rendering of child elements   Example   div   zoom  200      lt div style    zoom  200     gt This is x2 text  lt  div gt

User · Answer

zoom is a css3 spec for the  viewport descriptor  as described here   http   dev w3 org csswg css-device-adapt  zoom-desc  used to zoom the entire viewport   screen     it also happens to zoom individuals elements in a lot of browsers  but not all   css3 specifies transform scale should be used to achieve such an effect   http   www w3 org TR css3-transforms  transform-functions  but it works a little different than the  element zoom  in those browsers that support it

User · Answer

Zoom is not included in the CSS specification  but it is supported in IE  Safari 4  Chrome  and you can get a somewhat similar effect in Firefox with -moz-transform  scale x  since 3 5   See here   So  all browsers   zoom  2   zoom  200     will zoom your object in by 2  so it s like doubling the size  Which means if you have   a hover      zoom  2      On hover  the  lt a gt  tag will zoom by 200    Like I say  in FireFox 3 5  use -moz-transform  scale x   it does much the same thing   Edit  In response to the comment from thirtydot  I will say that scale   is not a complete replacement  It does not expand in line like zoom does  rather it will expand out of the box and over content  not forcing other content out of the way  See this in action here  Furthermore  it seems that zoom is not supported in Opera   This post gives a useful insight into ways to work around incompatibilities with scale and workarounds for it using jQuery

User · Answer

As Joshua M pointed out  the zoom function isn t supported only in Firefox  but you can simply fix this as shown   div zoom     zoom  2     all browsers     -moz-transform  scale 2       Firefox

User · Answer

Surprised that nobody mentioned that zoom  1  is useful for IE6-7  to solve most IE-only bugs by triggering hasLayout

User · Answer

Only IE and WebKit support zoom  and yes  in theory it does exactly what you re saying   Try it out on an image to see it s full effect

[css] What Does 'zoom' do in CSS?

Examples related to css