Image Zoom on Hover using Javascript (Code + Demo)

In this article you will learn how to create Zoom Image on hover using JavaScript. Zoom Image is created in many ways. If you want, you can also add zoom effect in the middle of an image image just by html.

The design made here is JavaScript Image zoom on hover. Since JavaScript is used here, it is very advanced. You can zoom in on every point of the image in this project.

✅✅ Live Preview 👉 JavaScript Image Zoom

Basically it will follow your mouse cursor. As a result, the part of the image where you move the mouse will be zoomed in. But it is not possible to just zoom the image with css.

Javascript Image Zoom on Hover

First I made a box. Then I added an image in that box. A border of box height: 300px, width: 500px and 5px has been used. The image has been made equal to the size of the box.

You need to follow 3 steps to create it. Below I have given all the code. However, I have shared the explanation with each of those code lines have been used.

HTML Code

The following code is html by which a box is created and the image is added.

The same image has been used twice here.

• Image has been added using 'background-image' in 'figure' first.

• Image has been added to the img tag later.

• Here onmousemove = "zoom (event)" is used. As a result, if you move the mouse over the image, the image will zoom.

• Here only the image in 'figure' will be zoomed. Images added using Imgre tags will not change.

Below are two images that have been used and what they do.

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://images5.alphacoders.com/343/thumb-1920-343645.jpg)">

  <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg" />

</figure>

CSS Code

Now it is time to design Zoom Image on hover by css.

• First the basic design of 'figure' has been done. Box height: 300px, width: 500px
• Then I added the hover effect in the Norman image (img: hover). Here opacity: 0 is used using hover. As a result, if you move the mouse inside the box, the image added by the img tag will not be visible.
• Since the image using the img tag cannot be seen, the image in the 'figure' on the back can be seen.

figure.zoom {
  background-position: 50% 50%;
  position: relative;
  margin: 150px auto;
  border: 5px solid white;
  box-shadow: -1px 5px 15px black;
  height: 300px;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

figure.zoom img:hover {
  opacity: 0;
}

figure.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript Code

Almost all the work of design is made. Now it's time to activate this Zoom Image by JavaScript. JavaScript basically helps to follow the mouse cursor.

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 + '%';
}

Please comment on how you like this javascript image zoom on hover. If there is any problem, please comment. I have created many image zoom effects using css.

Hopefully you have learned from this article how to Zoom Image on hover using JavaScript.

Comments

[royfieldsmcclanahan]

Really great code! Wanted to point out that this may break for some mobile-sized viewports because your JS has an oversight. Probably want the it to read like the following:

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

Hope this helps!

[Amir-cahyadi]

Nice 👍