You are currently viewing HTML/CSS transition effect to zoom an image

HTML/CSS transition effect to zoom an image

CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed in a web page. It can control the layout of multiple web pages all at once using external stylesheets that are stored in CSS files.

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 using CSS scaling transformation.

CSS transition

CSS transitions, provide a way to animate object on mouse hover with duration.

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

Example:

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

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

CSS Image Animation

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .div {
      height: 200px;
      width: 200px;
      overflow: hidden;
    }
    .zoomimg img {
      height: 200px;
      width: 200px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
    }
    .zoomimg img:hover {
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="zoomimg div">
    <img src="https://headlessprogram.com/wp-content/uploads/2019/09/logo.png"  title="Scale on Hover with Transition using CSS" />
  </div>
</body>
</html>

Leave a Reply