CSS Zoom Effect

There are many ways you can add a special effects to your web pages and one of them is adding a Zoom Effect on Images when user hovers over them. You create image zoom effect using css3 transitions. That means you can Grow an Image or Shrink and Image on mouse hover can be created using CSS3 scaling transformation.

CSS transition

CSS transitions, which are part of the CSS3 set of specifications, provide a way to control animation speed when changing CSS properties.


The above code shows that the div will take 2 seconds when the mouse is over it to turn the border color Red to Green.

CSS Image Grow and Shrink

From the following examples you can learn how to Grow and Shrink images with the help of CSS transition.

Zoom-In Image on Hover

Source Code

Grow Image on Hover

Source Code

Zoom-Out Image on Hover

Source Code

Shrink Image on Hover

Source Code