What Does ‘zoom’ do in CSS?

by

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.

More Related Contents:

  1. CSS not applying on multiple instances of a custom control
  2. How can I center an absolutely positioned element in a div?
  3. What is the difference between Normalize.css and Reset CSS?
  4. CSS hover border makes inline elements adjust slightly
  5. Difference between @import and link in CSS
  6. CSS media query to target only iOS devices [duplicate]
  7. Position a CSS background image x pixels from the right?
  8. How to set up fixed width for ?
  9. What is the difference between :focus and :active?
  10. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  11. Sass Invalid CSS Error: “expected expression”
  12. font-size vs line-height vs actual height
  13. Google chrome a:visited background image not working
  14. hide div tag on mobile view only?
  15. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  16. How can I send an inner to the bottom of its parent ?
  17. Can I colour backgrounds of selected items in HTML select options with CSS only?
  18. CSS3 combining selectors with OR instead of AND
  19. What’s the difference between inline styles vs classes?
  20. What is the difference between `margin` and `padding` in CSS?
  21. Can I apply a CSS transition to the overflow property?
  22. How to change the scrollbar color using css [duplicate]
  23. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  24. Align form elements in CSS
  25. How to apply border radius in IE8 and below IE8 browsers?
  26. Is it possible to give one CSS class priority over another?
  27. In outlook html email, float does not work
  28. Why magin:auto is not enough to center position absolute or fixed?
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. How to extend css class with another style?

Leave a Comment