Menu
Sitepoint reference says
Internet Explorer for Windows versions 5.5 and above support the non-standard property zoom, which sets the magnification scale of an element. There’s no CSS3 equivalent to this property (as yet).
How can I achieve this zoom effect in standard browsers? Any jQuery plugins available?
648
The zoom property specifies the magnification scale of an object. It is used to scale the elements of your website. This property is non-standard and is supported by only some browsers including IE, Chrome and Safari. So, it's better to use the scale function of the transform property as an alternative. It takes the following three values.
How does zoom work in CSS? CSS zoom works based on attribute value provided to the zoom attribute. If we pass zoom attribute value as normal then size becomes 100%. If we pass zoom attribute value as reset then it will reset back to original size from user custom values like 120%, 70%, 150%, etc.
Learn how to zoom/scale an element on hover with CSS. Zoom on Hover Hover over the green box: How To Zoom on Hover Example <style> .zoom { padding: 50px; background-color: green; transition: transform .2s; /* Animation */ width: 200px;
Values larger than 100% zoom in. Values smaller than 100% zoom out. Zoom factor. Equivalent to the corresponding percentage ( 1.0 = 100% = normal ). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out. Not part of any standard. This property originated in Internet Explorer.
The CSS3 equivalent is in the CSS 2D Transforms module, in particular transform: scale().
Because this module is still at Working Draft stage, you'll need browser-specific prefixes:
transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
You may also need transform-origin (and browser-specific versions) to make it behave the same way as zoom, and you'll have to be careful to target zoom only at IE, because WebKit supports both transform and zoom so would double-scale.
96
To complete the answer of scale transformations: why you not addressing IE as well? There is a specific -ms-zoom property, which will work in IE only: http://msdn.microsoft.com/en-us/library/ie/ms531189(v=vs.85).aspx
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
