How To Zoom Image On Click In Html

by

In this blog post, we’ll explore how to create a simple image zoom feature on click in HTML. This functionality is helpful for showcasing product images or other visual details on your web pages. Our solution will involve HTML, CSS, and JavaScript to achieve the desired result.

Step 1: Create the HTML Structure

First, we’ll create a basic HTML structure for the image and its container, which will hold the zoomed image. Here’s the code:


    <div class="image-container">
      <img src="your-image-source" alt="Your Image Description" id="zoomedImage" onclick="zoomImage()">
    </div>

Step 2: Add CSS Styles

Next, we’ll add some CSS styles to position the image and its container correctly. We will use flexbox to center the image within the container. Add the following CSS code to your stylesheet:


    .image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    #zoomedImage {
      max-width: 100%;
      max-height: 100%;
      transition: transform 0.3s ease;
    }

    #zoomedImage.zoomed {
      transform: scale(2);
      cursor: zoom-out;
    }

Step 3: Add JavaScript Functionality

Finally, we’ll add the JavaScript function that toggles the zoom effect when the image is clicked. Add the following JavaScript code to your script file or within a script tag:


    function zoomImage() {
      const image = document.getElementById('zoomedImage');
      image.classList.toggle('zoomed');
    }

Conclusion

That’s it! You now have a simple image zoom feature that works on click. When users click an image in the “image-container” div, it will zoom in, and clicking again will zoom out. You can also customize the CSS to change the zoom level, transition speed, or other visual aspects of the zoom effect. Happy coding!