How to Create An Image Zoom on Hover With JavaScript



JavaScript Image Zoom on Hover

Creating an image zoom is very easy if you know JavaScript. In this tutorial, I will show you how to create a JavaScript image zoom effect.

You will find many tutorials on this topic on the internet. But here I will tell you the easiest way to zoom an image by HTML CSS JavaScript bar. With this, you will know how to add image zoom in an image using JavaScript.

JavaScript Image Zoom on Hover 

Earlier I shared tutorials on creating many types of Image Zoom, Image Magnifier Glass, and Image Hover Effects.

There is no need to worry if you are a beginner. Here I have shown step by step how to make image zoom javascript. You can also create zoom effects using CSS only if you want. 

However, in that case, you will not be able to control the position of the zoom. In this case, the zoom effect will follow your mouse cursor. This means that the image of the place where your mouse will be zoomed.

See the Pen Vanilla image zoom by Shantanu Jana (@shantanu-jana) on CodePen.


For this, you need to have some knowledge about JavaScript. Here I have given all the source code. Because very little code has been used to create this Image Zoom on Hover.


HTML code of Image Zoom

A box containing the image has been created using the HTML below. Here you can change the image to your liking.


<div class="image">
<img src="https://images.unsplash.com/photo-1493441883526-0ed85220dc0c?w=2091&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="Unsplash Image">
</div>

CSS code of Image Zoom

Now you have to design this Image Zoom on Hover using some CSS. First I designed the box. Here the width of the box: 600px, height: 400px is used. 

Here the size of the zoomed image is kept equal to the box. I have used a 5px border with it here.


body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.image {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: -1px 5px 15px #000;
}
.image:hover {
  --zoom: 3;
}
.image img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(var(--zoom, 1));
  transform-origin: var(--x) var(--y);
  transition: transform 0.3s ease;
}

Image Zoom's JavaScript code

Above we have done the work of designing this JavaScript Image Zoom. Now is the time to activate it via JavaScript. Below are all the codes put together and with the necessary explanations. Hopefully, those explanations will help you understand this JavaScript code.


document.querySelectorAll('.image').forEach((elem) => {
  let x, y, width, height
//onmouseenter event occurs when the mouse pointer is moved onto an element
  elem.onmouseenter = () => {
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport
    const size = elem.getBoundingClientRect()
x = size.x
y = size.y
width = size.width
height = size.height
  }
//onmousemove event occurs when the pointer is moving while it is over an element
  elem.onmousemove = (e) => {
    const horizontal = ((e.clientX - x) / width) * 100
    const vertical = ((e.clientY - y) / height) * 100
    elem.style.setProperty('--x', horizontal + '%')
    elem.style.setProperty('--y', vertical + '%')
  }

})

Image zoom is a common web element. You can use this Image Zoom JavaScript in different places. There is no substitute for this type of design to zoom in on an image. Comment on how you like this JavaScript Image Zoom.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more