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
div {
zoom: 200%
}
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.
40 Responses
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?
It only works on some browsers… try it on firefox or chrome or a browser like that…
as far as I can tell there is no “zoom” property in CSS, up to CSS3.
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
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.
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
I agree with Danny. I would avoid zoom. Why not use just font-size: 200%? It is standard and supported.
i check this code but i could not see any result on mozila ?…..
zoom is an IE option that fixes several bugs with the display of layers in IE 7 and below.
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.
It works in IE only
I agree, using a CSS feature which isn’t supported by the main browsers just complicates things…
The Zoom property is supported in all major browsers except Firefox 3.6. (Chrome, Opera, Safari, and IE8). This is verified.
zoom: 50%; is not working for me in Safari 4.0.5
Can anyone help?
its supports in IE, but i don’t think it works in Firefox and other modern browsers
For Firefox, you can use the -moz-transform property with scale option. -moz-transform : { scale (0.5) }
On IE8 Compatibility mode “on” it doesn’t works correctly as FF 3.6.1.
-moz-transform :scale(0.5);
without curly brackets
CSS zoom is deprecated in IE9
hell yeah dude. i just found this on a search. #1 for “css zoom”
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.
https://www.newpakjobs.com/
In old templates you can find zoom as a fix for IE6 styling (to solve display/rendering issues).
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?
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?
Zoom property is not for all browsers, it works only in IE’s older version, and it helps to solve lots of IE issues.
[…] help preserve quality while keeping the cards viewable as a set, each card container had a zoom applied via CSS, so that I could scale them to 1:1 size for viewing in the browser, but blow them […]
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..
[…] is pretty straightforward. What I am doing is every alternate second I am zooming the body using CSS3′s zoom property and calculating windows height and width. Its just the body that zooms in and zooms out […]
[…] is pretty straightforward. What I am doing is every alternate second I am zooming the body using CSS3′s zoom property and calculating windows height and width. Its just the body that zooms in and zooms out […]
thank you for your css tricks
is supporting css zoom-in and zoom-out .
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!
Looking for CSS3 zoom and neon glow combined effects? is there any tutorial?
Thanks
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.
[…] there a cross-browser method to emulate CSS3′s zoom property? I know how to zoom images and text separately, but cannot seem to keep everything […]
this code is working very good!
tanks for your post.
it’s help me much!
:X
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.
منتديات الجامعه
مدونة الجامعه
دردشة الجامعه
its so very easy method thanx i visit this site http://www.webofinfo.com but you are nice one