How to Create an Image Overlay Zoom Effect on Hover

One of the most interesting and attractive effects you can add to an image is the zoom effect.

An image zoom effect is an eye-catching way to grab the attention of your website visitors.

In this tutorial, we’ll show you how to create an image overlay zoom effect on hover using HTML, CSS and JavaScript.

Step 1: HTML Markup

The first step is to create the HTML markup for our image. For this, we’ll use an HTML
<div> element with a class name “container” and inside that, we’ll have another <div> element with a class name “image”. The <img> tag will be inside the “image” <div>.

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

Step 2: CSS Styles

In this step, we’ll add some CSS styles to our HTML markup.

We’ll set the position of the container and image classes to relative so that we can position the overlay div over the image.

.container {
  position: relative;
}

.image {
  position: relative;
}

.image img {
  width: 100%;
}

Step 3: Adding the Overlay

In this step, we’ll add the overlay <div> to our HTML markup. The overlay <div> will have a class name “overlay”. We’ll set its position to absolute and set its top and left properties to 0. This will position the overlay div at the top left corner of the image.

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="Image">
    <div class="overlay"></div>
  </div>
</div>

Step 4: CSS Styles for the Overlay

We’ll now add some CSS styles to the overlay <div> class. We’ll set its background color to a translucent black color. We’ll also set its width and height to 100% so that it covers the entire image.

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

Step 5: Adding the Zoom Effect

In this final step, we’ll add the zoom effect to our image. We’ll use the JavaScript onmouseover and onmouseout events to trigger the zoom effect. We’ll add the following code inside a <script> tag in our HTML file.

<script>
  const image = document.querySelector('.image');

  image.addEventListener('mouseover', function() {
    image.style.transform = 'scale(1.5)';
  });

  image.addEventListener('mouseout', function() {
    image.style.transform = 'scale(1)';
  });
</script>