How To Zoom Image On Hover Using Jquery

by

In this blog post, we will learn how to create a simple image zoom effect on hover using jQuery. This effect is commonly used in image galleries and product showcases to provide a closer view of the item when the user hovers their mouse over it.

Step 1: Set up your HTML

First, you need to create a container element to hold your image. In our example, we will use a div element with a class of image-wrapper. Inside the container, add your image using the img tag:

<div class="image-wrapper">
  <img src="your-image-url" alt="An example image">
</div>

Step 2: Add CSS styles

Next, add some basic CSS styles to set the image wrapper’s width and hide any overflow. This is important because when we zoom the image, it will be larger than the container, and we don’t want the excess to be visible:

<style>
  .image-wrapper {
    width: 300px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin: 10px;
  }
  .image-wrapper img {
    width: 100%;
    height: auto;
    transition: transform .3s;
  }
</style>

We also added a transition to the img tag to create a smooth zoom effect.

Step 3: Add jQuery

Make sure you have added jQuery to your project. You can either download it from the official website or use a CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 4: Create the zoom effect with jQuery

Now that we have everything set up, it’s time to create the zoom effect using jQuery. We will use the hover() method to detect when the mouse is over the image and apply a CSS transform to scale it up:

<script>
  $(document).ready(function() {
    $('.image-wrapper img').hover(
      function() {
        $(this).css('transform', 'scale(1.5)');
      },
      function() {
        $(this).css('transform', 'scale(1)');
      }
    );
  });
</script>

The first function in the hover() method is executed when the mouse enters the image, and the second function is executed when the mouse leaves the image.

Conclusion

That’s it! You have successfully created a simple image zoom effect on hover using jQuery. This effect can be used in various scenarios, such as showcasing products or presenting images in a gallery. You can further customize the styles and the zoom level to fit your specific needs.