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

zoom, as expected, does simply zoom: http://jsfiddle.net/W24de/ ;) — meo, Apr 23 '12 at 10:38
You should have copied the code actually used in the jQuery plugin into your question. Most likely, the reason for its use is to provide hasLayout as mentioned by Ilia Akhmadullin. Nobody should be using the `zoom` property to actually "zoom" due to the incomplete browser support. — thirtydot, Apr 23 '12 at 11:46

score 69 · Accepted Answer · edited Jun 09 '15 at 19:43

69

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 <a> 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.

edited Jun 09 '15 at 19:43

hallvors

6,069
1
25
43

answered Apr 23 '12 at 10:34

17

`zoom` and `transform: scale()` have significant differences. The transform origin is easily fixed, but the fact that `transform` does not affect the flow of content and `zoom` does is not simple to fix. Also, `zoom` doesn't seem to be supported in Opera. You should really edit your answer, it's misleading at the moment. – thirtydot Apr 23 '12 at 11:48
3

@thirtydot - Amended my answer. Thanks. – Apr 23 '12 at 12:20
It would be interesting to use z-index with zoom – TrySpace Feb 06 '14 at 23:20
Hi, I suggest you modify this answer a little more to clarify the following: a) The zoom property is not standardised, so ideally it should be avoided b) Properties with -moz- prefix (any prefix really, Firefox is just more principled about it) are also experimental and WILL be removed when there is a standardised way to do things. These days, using or recommending -moz-transform is not a good idea. – hallvors Apr 23 '15 at 10:57
@hallvors The question wasn't should I use zoom, it was What does zoom do. Its also in the answer that there are incompatibilities, and gives the relevant supported information. – Jun 03 '15 at 13:47
No problem, although I think it's important to note whether something is standard or not. – hallvors Jun 09 '15 at 19:44

Ilia Akhmadullin · Answer 2 · 2015-04-10T13:50:52.567

37

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

edited Apr 10 '15 at 13:50

answered Apr 23 '12 at 10:49

Ilia Akhmadullin

1,573
1
10
16

Scriptor · Answer 3 · 2012-04-23T10:36:09.980

3

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>

edited Apr 23 '12 at 10:36

answered Apr 23 '12 at 10:28

Scriptor

1,125
1
6
13

score 3 · Answer 4 · answered Jan 06 '17 at 11:32

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 {
  zoom: 2.5;
}
#sel-002 {
  zoom: 5;
}
#sel-003 {
  zoom: 300%;
}

<div id="sel-000">IMG - Default</div>

<div id="sel-001">IMG - 1X</div>

<div id="sel-002">IMG - 5X</div>

<div id="sel-003">IMG - 3X</div>


<div id="sel-jsz">JS Zoom - 4x</div>

Rudi Visser · Answer 5 · 2012-04-23T13:49:49.353

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

edited Apr 23 '12 at 13:49

answered Apr 23 '12 at 10:27

Rudi Visser

21,350
5
71
97

1

False. Zoom is supported in IE, Opera, Safari 4, Chrome and Firefox with `-moz-transform: scale(x)` since 3.5. – Apr 23 '12 at 10:29
1

Ah; Last time I tried it it didn't have any effect. CSS3 transforms aren't really the same, so no, Firefox doesn't support it. Perhaps internally 'zoom' is represented by a transformation since CSS3 in other browsers. – Rudi Visser Apr 23 '12 at 13:47
2

Actually, zoom doesn't seem to work in Opera either from a quick test. So what you're saying is that it works in IE and WebKit. – Rudi Visser Apr 23 '12 at 13:49

commonpike · Answer 6 · 2015-03-30T08:32:18.730

2

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.

edited Mar 30 '15 at 08:32

answered May 05 '13 at 14:39

commonpike

10,499
4
65
58

1

It's very clear from the question that that's not the `zoom` that you're talking about. – BoltClock May 05 '13 at 16:16
5

yes :-) but strictly speaking, if the question is 'what does zoom do in css' this is the answer according to the css specifications. this is the only official zoom there is afaik, hence all the confusion. – commonpike May 05 '13 at 19:14

score -1 · Answer 7 · answered Apr 23 '12 at 10:33

-1

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

answered Apr 23 '12 at 10:33

Key-Six

2,439
2
26
22

1

Those are two entirely different properties, though they yield similar results. Your example would zoom it out to 25% rather than 50%. – qwerty Mar 18 '13 at 15:02

What Does 'zoom' do in CSS?

7 Answers7

Linked