Image Zoom on Hover using Pure Javascript & CSS

Image Zoom on Hover makes the image slider or gallery much more interesting and suitable. You can easily create an image zoom using only HTML and CSS. However, some amount of JavaScript has been used here.

In this article, I have shown how to make image zoom using JavaScript and CSS. Earlier I made many more designs in image galleries and sliders. You can see those designs.

 As you can see in the picture above it is a beautiful Image Zoom on Hover. Using JavaScript here allows you to zoom the image as needed.

JavaScript Zoom on Hover

This type of JavaScript image zoom you can use in any of your image sliders or galleries. Below I have given a live demo of it which will help you to know how the design works. 

Hopefully, the demo above has helped you a lot. If you want the source code, you can use the download button at the bottom of the article.

See the Pen Pure javascript image zoom by Foolish Developer (@fghty) on CodePen.

In the following tutorial, I have shown how I created this image zoom effect using JavaScript and CSS. Before I share this tutorial, let me tell you something about design. 

It looks like an ordinary image slider. I used a beautiful image and used a border around it. It will zoom in when you hover or click the mouse over this image box. 

How to Zoom Image on Hover in Javascript

The most important point is that you can move the image after zooming in. If only CSS was used, the image could not be moved. So here I have used some amount of JavaScript to move along the X and Y-axis.

Step 1: Basic structure of Image Zoom on Hover

First, we created the basic structure of this Image Zoom on Hover using the following HTML and CSS code. Using HTML I added the necessary images and created the basic structure of the slider. 

Then using CSS code I shaped this image into a beautiful box. If you notice, you will understand that there is a beautiful sad around the image for which box-shadow: -1px 5px 15px black has been used.

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(img.jpg)">

  <img src="img9.jpg" />

</figure>

figure.zoom {

  background-position: 50% 50%;

  position: relative;

  margin: 100px auto;

  border: 5px solid white;

  box-shadow: -1px 5px 15px black;

  height: 300px;

  width: 500px;

  overflow: hidden;

  cursor: zoom-in;

}

Step 2: Design the image using CSS

This image has been taken by CSS to design the image in the zoom design.

figure.zoom img {

  transition: opacity 0.5s;

  display: block;

  width: 100%;

}

figure.zoom img:hover {

  opacity: 0;

}

Step 3: Activate Image Zoom on Hover using JavaScript

Now I have implemented this Image Zoom on Hover with the help of JavaScript.

function zoom(e){

  var zoomer = e.currentTarget;

  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX

  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX

  x = offsetX/zoomer.offsetWidth*100

  y = offsetY/zoomer.offsetHeight*100

  zoomer.style.backgroundPosition = x + '% ' + y + '%';

}

Hopefully from the above tutorial, you have learned how to create this Image Zoom on Hover using JavaScript and CSS.

The download will start automatically