CSS3 Magnification / Enlarge / Scale Effect

In this article I will share how we can have pure HTML5 magnification or enlarge or scale effect for various elements in a web page, with easing effects, by only using CSS3, that is without using any JavaScript or jQuery Plugin, of course a modern web browser(Recent Firefox, Chrome, Opera, Safari) will be needed for it. The live demonstration of this can be seen at the end of this post.


The CSS has 2 parts, one for default effects and the other one for hover effects, following are the CSS snippets:

Default CSS for the element

{code type=CSS}
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

Hover CSS for the element

{code type=CSS}
-webkit-transform: scale(1.1) translateZ(0);
-moz-transform: scale(1.1) translateZ(0);
-o-transform: scale(1.1) translateZ(0);
transform: scale(1.1) translateZ(0);


When the above snippets will be implemented correctly, they will give you the magnification / enlarge / scale effect, I am also including a demonstration for how it will look live. I have used the above two CSS codes for the headline and the image.

Alternatively, you can see it here.

Further Reading

You can also try out ImageLens which is a jQuery plugin for giving lens effect while zooming images. Also, below are the pages of CSS properties used in above snippets.
[unordered_list style=”arrow”]