How to make an image change its size smoothly on hover in CSS

Arif Billah Babu

          

  CSS



Image not found!!

You can use CSS transitions to achieve a smooth size change when hovering over an image. Here's an example:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image-container {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }

    .image-container img {
      display: block;
      transition: transform 0.3s ease-out; /* Adjust the duration and easing as needed */
    }

    .image-container:hover img {
      transform: scale(1.2); /* Adjust the scale factor as needed */
    }
  </style>
</head>
<body>

  <div class="image-container">
    <img src="your-image.jpg" alt="Your Image">
  </div>

</body>
</html>

In this example:

  • The .image-container class is used to create a container for the image with relative positioning and hidden overflow to ensure that the image doesn't overflow its container.

  • The .image-container img selector targets the image inside the container and applies a CSS transition to the transform property. The transition duration is set to 0.3 seconds with an ease-out timing function. You can adjust these values based on your preference.

  • The .image-container:hover img selector targets the image inside the container when hovering over the container. It then applies a transform: scale(1.2); property, which enlarges the image to 120% of its original size. You can adjust the scale value to control the amount of enlargement.

Feel free to customize the code according to your specific needs and styles.

Category List