How to Create an Image Zoom by CSS and JavaScript

Image zoom is a popular feature that is widely used in many websites.

It allows the user to zoom in and out of an image with a click or touch. This effect can be achieved using CSS and JavaScript.

In this tutorial, we will go through the steps to create an image zoom effect with CSS and JavaScript.

CSS

We will use CSS to style our image container and to hide the original image.

.container {
position: relative;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

HTML

We will use HTML to create the structure of our image container.

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

JavaScript

We will use JavaScript to create the zoom effect.

We will create a function that increases the size of the image when the mouse hovers over it.

const image = document.querySelector('.image');

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

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