CSS ZOOM

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

1
2
3

div {
zoom: 200%
}

1	<div style="zoom: 200%">This is x2 text</div>

Possible Values

normal: No magnification is applied. The object is rendered as it normally would be.

[number]: Positive floating point number indicating a zoom factor. Numbers smaller than 1.0 indicate a “zoom out” or size reduction effect, while numbers greater than 1.0 indicate a magnifying effect.

[percentage]: Positive floating point number, followed by a percentage character (“%”) which indicates a zoom factor. Percentages smaller than 100% indicate a “zoom out” or size reduction effect, while numbers greater than 100% indicate a magnifying effect.

http://reflextyping.org.ua kattykatty

div.zoom { zoom: 3; }
________________________
1))))))))))))))002 003 004 005 006 007 008 009 010 011 012 013 014 015
2))))))))))))))002 003 004 005 006 007 008 009 010 011 012 013 014 015

this code would display the numbers of same size. so what does actually zoom property magnifies?
- http://www.dumbsearch.com/ Dumb Search
  
  It only works on some browsers… try it on firefox or chrome or a browser like that…
Giuliano

as far as I can tell there is no “zoom” property in CSS, up to CSS3.
Tuck

KattyKatty, the ZOOM works on objects. As far as I know, it only works in IE, like so:

iframe style=”zoom: 75%” align=”center” height=”480″ width=”640″ src=”http://www.google.com/”
/iframe
http://seanneedham.es Sean

Doesn’t work on Firefox, but works in Safari, however, the down side is that you have to design your structure in a way that you have the space for the zoomed component already there, as if you use fixed structuring, your page layout breaks up.
http://damirmustafic.co.uk Danny Mustafic

I suggest you dont mess with zoom until it becomes supported by all the browsers.

You may also add zoom class to span tag to modify text object
http://www.sugarcloud.com/blog/ zi

I agree with Danny. I would avoid zoom. Why not use just font-size: 200%? It is standard and supported.
http://www.skyowner.com/ Vivek

i check this code but i could not see any result on mozila ?…..
Charlie B

zoom is an IE option that fixes several bugs with the display of layers in IE 7 and below.
http://electronfusioncreative.com Maurice Ferguson

It will be immensely useful when all the browsers implement the zoom feature. Right now my pages are defined in absolute (pixel) terms, using mostly scalable vector graphics, & it will be so nice to be able to automatically scale the entire page to fill any browser window.
Pranjali

It works in IE only
http://www.fionasweddingphotography.co.uk Photographer London

I agree, using a CSS feature which isn’t supported by the main browsers just complicates things…
thomas.tmc

The Zoom property is supported in all major browsers except Firefox 3.6. (Chrome, Opera, Safari, and IE8). This is verified.
http://www.iniquus.com Hemant

zoom: 50%; is not working for me in Safari 4.0.5
Can anyone help?
http://fekky-fekky-fekky.blogspot.com/ feroz

its supports in IE, but i don’t think it works in Firefox and other modern browsers
J.Karthik

For Firefox, you can use the -moz-transform property with scale option. -moz-transform : { scale (0.5) }
Vitor

On IE8 Compatibility mode “on” it doesn’t works correctly as FF 3.6.1.
Yuri

-moz-transform :scale(0.5);
without curly brackets
Dean

CSS zoom is deprecated in IE9
lurchpop

hell yeah dude. i just found this on a search. #1 for “css zoom”
Webbed_Feet

I’m using a collapsed feature and ZOOM CSS is showing up in IE and not in FF for no reason! AAAAargh!

inline CSS:
display: block; fade:1; Zoom:1

No one knows why Zoom: 1 is showing up in IE.
http://www.echteinfach.tv/ Frako

In old templates you can find zoom as a fix for IE6 styling (to solve display/rendering issues).
http://YourWebsite Abhiram Natarajan

When I do zoom on an image, it works as expected. However, the image’s height and width remain unchanged. I wanted to use zoom to make my images smaller and hence allow more images to fit in a row. I am unable to do this because, like I said, zoom does not change the height and the width.

I tried manually setting the height and the width – this has weird behaviour. It appears that height and width get applied to the image before zoom and thus causes a portion of the image to be cut off. Does anybody know what I can do to force the dom to realise that an image has been scaled and that it needs to reposition other elements based on the new width and height?
Ssyou

Abhiram, did you resolve your problem. I’m also looking for same problem.

When I do zoom on an image, it works as expected. However, the image’s height and width remain unchanged. I wanted to use zoom to make my images smaller and hence allow more images to fit in a row. I am unable to do this because, like I said, zoom does not change the height and the width.

I tried manually setting the height and the width – this has weird behaviour. It appears that height and width get applied to the image before zoom and thus causes a portion of the image to be cut off. Does anybody know what I can do to force the dom to realise that an image has been scaled and that it needs to reposition other elements based on the new width and height?
http://- Himanshu

Zoom property is not for all browsers, it works only in IE’s older version, and it helps to solve lots of IE issues.
Pingback: Business Cards | Tom J Nowell
Satish Kumar

Hai all,

I also used zoom property of css in my application .. it works well but after zooming iam trying to get mouse positions on zoomed division it was giving wrong results..
Pingback: Detecting Actual Window Size in IE When Using CSS3 Zoom Property - feed99
Pingback: Detecting Actual Window Size in IE When Using CSS3 Zoom Property video
http://kursuswebsite.org kursus website

thank you for your css tricks
http://mywebsite.com kamlesh

is supporting css zoom-in and zoom-out .
http://sjak.co.uk/reputation/reputationmanagementseo.php Web Design London

although I do love HTML5 and CSS3 animations…
css zoom is a bit useless as if it is text you are better of using:
div { font-size:2.0 em; }
or anything else you can just use {width:200%; height:200%;}

okay useful for css3 animations but as that is pretty much still only supported in Webkit you might be better of using JQuery…

Yeah we got rid of IE6 now the rest need to step up and get CSS3 anim on board quickly!
http://www.blogosense.com Pranjal

Looking for CSS3 zoom and neon glow combined effects? is there any tutorial?

Thanks
http://kingliontoursandsafaris.com Alfred

Hi people. I have just created a simple photo gallery with the frame feature. one is that it wont centre the images but the most itching is the fact that when i open the page with IE or chrome, the images inside the frame tend to be zoomed already.

Any help?

Thank you.
Pingback: Zooming an element and its contents— an alternative to CSS3's zoom property? - Javascript Questions Solution - Developers Q & A
http://warhosting.in mohammad hossein izadi

this code is working very good!
tanks for your post.
it’s help me much!
:X
Michael

Here is good example how it can be used on practice:
http://basicuse.net/articles/pl/textile/html_css/animated_image_with_zoom_effect_and_appearing_title_using_only_css3
Very good solution for images for new or article website.
mnhpkallah

منتديات الجامعه
مدونة الجامعه
دردشة الجامعه

CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

CSS ZOOM

Example

Possible Values

Sponsors

Properties