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
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
Hover CSS for the element
-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.
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.
- transition – MDC Docs
- -moz-transform – MDC Docs
- Surfin' Safari – Blog Archive » CSS Animation
- Surfin' Safari – Blog Archive » CSS Transforms
- Opera: CSS3 Transitions support in Opera Presto 2.3
- Opera: CSS3 2D Transforms support in Opera Presto 2.4