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

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

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

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 */
}

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.

CSS zoom property is widely supported now > 86% of total browser population.

See: http://caniuse.com/#search=zoom

document.querySelector('#sel-jsz').style.zoom = 4;

#sel-001 {_x000D_
  zoom: 2.5;_x000D_
}_x000D_
#sel-002 {_x000D_
  zoom: 5;_x000D_
}_x000D_
#sel-003 {_x000D_
  zoom: 300%;_x000D_
}

<div id="sel-000">IMG - Default</div>_x000D_
_x000D_
<div id="sel-001">IMG - 1X</div>_x000D_
_x000D_
<div id="sel-002">IMG - 5X</div>_x000D_
_x000D_
<div id="sel-003">IMG - 3X</div>_x000D_
_x000D_
_x000D_
<div id="sel-jsz">JS Zoom - 4x</div>

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% }
 <div style=”zoom: 200%”>This is x2 text </div>

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