Creating a Zoom Effect on an image on hover using CSS

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.

.div {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Example:

div {
  transition: all 2s ease;
  border: 5px solid red;
}
div:hover {
  border: 5px solid green;
}

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

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .frame {
      height: 200px;
      width: 200px;
      overflow: hidden;
    }
    .zoomin img {
      height: 200px;
      width: 200px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
    }
    .zoomin img:hover {
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="zoomin frame">
    <img src="img/zimage.png"  title="Scale on Hover with Transition using CSS" />
  </div>
</body>
</html>

Grow Image on Hover

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .zoomin img {
      height: 200px;
      width: 200px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
    }
    .zoomin img:hover {
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="zoomin">
    <img src="img/zimage.png"  title="All you need to know about CSS Transitions " />
  </div>
</body>
</html>

Zoom-Out Image on Hover

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .frame {
      height: 200px;
      width: 200px;
      overflow: hidden;
    }
    .zoomout img {
      height: 300px;
      width: 300px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
        transition: all 2s ease;
    }
    .zoomout img:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="zoomout frame">
    <img src="img/zimage.png"  title="html - CSS Resize/Zoom-In effect on Image  mouse hover " />
  </div>
</body>
</html>

Shrink Image on Hover

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .zoomout img {
      height: 300px;
      width: 300px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
        transition: all 2s ease;
    }
    .zoomout img:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="zoomout">
    <img src="img/zimage.png"  title="Image shrink CSS hover effect" />
  </div>
</body>
</html>