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.

Hover effect is a css property which keeps the track on the cursor and as soon as the user hover over the cursor on the image using the transform property we will scale the size of the image that looks like a zoom hover effect to the image, this effects are used for enchacing the user interactions.

Simple Social Media Icons Hover Effect with CSS

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.

Image Zoom on Hover using Pure Javascript & CSS

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.

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.

12+ Best CSS 3D Text Effects (Code + Demo)

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>

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;

}

12+ CSS Image Hover Effects (Free Code + Demo)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 + ‘%’;

}

Activate Image Zoom on Hover using JavaScript

final Video Output:

Conclusion:

Image hover effect project is a beginners project where we learn about the hover image property in which helps in adding the zoom over effect on the image to enhance user interactiveness.

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

What is an Hover Effect?

Hover effect is a css property which helps in creating unique design for the website . Hover effect uses css properties and we can change the color, shape and size of the object as the user hover the cursor on the element.

What is the Syntax for hover effect?

a:hover{
color: “pink”;
}

The download will start automatically