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 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
Grow Image on Hover
Zoom-Out Image on Hover
Shrink Image on Hover