HTML Image Zoom on Click using JavaScript

A zoom image is one of the useful features of user-friendly webpage design. It allows users to view the image more clearly in detail. This image can be a product or a general-purpose photo. There are multiple ways to allow users to see the full image. One of them shows the full zoom image in a modal popup. So, in this tutorial, we are going to create image zoom modal popup on click using HTML, CSS, and JavaScript.

The concept is that we’ll place an image in HTML and display it in the full size in another container/modal. We’ll specify some basic CSS styles for the image and the zoom image popup. In the final step, we’ll use the JavaScript to get the image src, alt text (for caption), and display it in the modal on the click event.

Basically, this is a modal popup project to smoothly zoom in and out an image. But, the source code can be easily integrated into a gallery or slideshow project in order to create a zoom image feature. You can check out the final output on the demo page before getting started with coding.

HTML Structure for Image Zoom on Click

In HTML, place your image with a unique id and create a div element with a class name "modal" just after it. Inside the modal, create img tag without src attribute and define a class name "modal-content". Similarly, create a div element with an id "caption" just after the image. The caption for an image will be inserted from the alt text of that image.

<!-- Image Zoom HTML -->   
<img id="myImg" src="img/image.jpg" alt="Trolltunga, Norway" width="500" height="300">
<!-- The Modal -->
<div id="myModal" class="modal">
   <img class="modal-content" id="img01">
<div id="caption"></div>
</div>

You can place the above HTML structure anywhere in your project in order to make a zoom effect for the image. If you have multiple images, just change the id attribute for each image and keep the other HTML as it is described.

Basic CSS Styles

After creating the HTML structure, now define the CSS styles for the image container. Display it as a block element and keep the margin auto from left and right in order to align it to the center. Likewise, specify the border-radius, cursor, and transition property as described in the below snippet.

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    display: block;
    margin-left: auto;
    margin-right: auto
}

In the same way, specify the hover style for the image. If you want to customize the hover style, check out cool image hover effects created with CSS.

#myImg:hover {opacity: 0.7;}

Now, target the "modal" class and define CSS styles for it. Specify the display property as "none" in order to keep it hidden by default. To make the modal sticky, define the fixed position, and set the z-index as 99 to set on the top of other elements. Similarly, define the width, height, and background color as follows:

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

The modal content div element contains the zoom version of the image. Keep its margin to auto and display it as a block element. Likewise, define 75% width in order to leave some space around the image.

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 75%;
    //max-width: 75%;
}

Define the margin "auto" for the caption bar in order to align it to the center. Specify 80% width and 150px height to display it as a bar element. Similarly, define the values for other CSS properties like color, text-align, etc according to your needs.

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

CSS Animation to Zoom Image

You need two animations to smoothly zoom in and zoom out the image modal. So, define the CSS keyframes for zoom in by using transform scale property as described in the below code:

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1)}
    to {-webkit-transform:scale(2)}
}

@keyframes zoom {
    from {transform:scale(0.4)}
    to {transform:scale(1)}
}

Similarly, specify CSS animation keyframes for zoom out as follows:

@-webkit-keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}
@keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}

Now, dedicate zoom in animation to the "modal-content" class and caption element. You can set the custom value for the animation-duration if you want to increase/decrease the zoom-in speed.

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

Similarly, create an additional class named “out” and add the zoom-out animation in it.  We’ll use this class name in the JavaScript function to close the modal with zoom-out animation.

.out {
  animation-name: zoom-out;
  animation-duration: 0.6s;
}

Set the 100% width for the modal-content class to make the image responsive on mobile.

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

JavaScript Click Function to Zoom Image

Finally, add the following JavaScript code to functionalize the zoom image modal popup on the click event.

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}


// When the user clicks on <span> (x), close the modal
modal.onclick = function() {
    img01.className += " out";
    setTimeout(function() {
       modal.style.display = "none";
       img01.className = "modal-content";
     }, 400);
    
 }    
    
</script>

You have finished! I hope you have successfully implemented this image zoom on click modal popup in your HTML project. If you have any questions or suggestions, let me know by comment below.

You Might Be Interested In:

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

12 thoughts on “HTML Image Zoom on Click using JavaScript”

  1. Hi, is it possible to use a dedicated thumbnail image for unzoomed display?
    Say, for each image zo be zoomed there are two versions “img.png” and “img-thumbnail.png”. This would decrease the page load time and would allow to prepare thumbnails with a professional picture editor instead of letting HTML zoom it down.
    Thank you.

    • Hi Michael!
      It’s quite possible, you can pass the URL of the full-size image in its thumbnail data attribute and then access it in JS to show the original image inside the modal. To do so, create a data-image attribute in the thumbnail image:

      <img data-image="path/to/full-size-image.jpg" id="myImg" src="img/image.jpg" alt="Trolltunga, Norway" width="500" height="300">
      

      Then use the JavaScript get attribute function to update the modalImg src value:

         modalImg.src = this.getAttribute("data-image");
      

      Hopefully, it works for you!

  2. What if I have multiple images, what do I have to do?

    • Hi Joao!
      You can run a loop for multiple images. To do so, add a class name "thumbnail" to each image that you wanted to zoom/show in the modal.

      <img class="thumbnail" src="path/to/image1.jpg" alt="Image 1" width="500" height="300">
      <img class="thumbnail" src="path/to/image2.jpg" alt="Image 2" width="500" height="300">
      <img class="thumbnail" src="path/to/image3.jpg" alt="Image 3" width="500" height="300">
      

      After that, create HTML for modal.

      <div id="myModal" class="modal">
        <img class="modal-content" id="img01">
        <div id="caption"></div>
      </div>
      

      Finally, add the following JavaScript function for multiple images.

      <script>
      // Get the modal
      const modal = document.getElementById('myModal');
      const modalImg = document.getElementById("img01");
      const captionText = document.getElementById("caption");
      
      var img = document.querySelectorAll('.thumbnail');
          
      for (var i=0; i<img.length; i++){
          
          img[i].onclick = function(){
          modal.style.display = "block";
          modalImg.src = this.src;
          modalImg.alt = this.alt;
          captionText.innerHTML = this.alt;
      }
           
      }
      
      // When the user clicks on <span> (x), close the modal
      modal.onclick = function() {
          img01.className += " out";
          setTimeout(function() {
             modal.style.display = "none";
             img01.className = "modal-content";
           }, 400);
          
       }       
      </script>
      
  3. bonjour
    je tente vainement de rajouter afin d’avoir plusieurs photos sur lequel on peut zoomer
    mais cela ne marche pas . Pouvez vous me passer sur ma boite mail le script exact .
    Merci beaucoup par avance
    claude

    • Hi Claude,
      Please ask your question in English. To add several photos and apply the zoom effect, you can still use this script and do a little customization. You can simply set a unique class name in HTML with each photo and then define in css file. I will try to post a different article for this. Thanks.

    • You’re welcome! keep visiting us for more free HTML CSS codes.

  4. how can i use this for multiple images in a gallery (to set product picture on big screen)

    • Hi JC!
      Please check João Gomes comment and its reply. I have already explained to add multiple images.

  5. Hi Asif,
    Great explanation tutorial.
    If the images are scattered in different sections/divs of the web-page. And we want all of the images ( or selected few images ) to individually have this zoom effect in their own individual modals.
    Should we change id to class:
    1. Should we use class = “myImg” instead of img id=”myImg” in the tag:

    2. And use: var img = document.querySelector(‘myImg’); instead of
    var img = document.getElementById(‘myImg’);

    3.Will this above use of class name for the different scattered take theindividual sources of the image and display in the same model on individual click event ?
    modalImg.src = this.src;

    • Hi Conexoes!
      Thanks for your feedback. Yes, your idea is quite accurate to open multiple images on the same page. I already gave the code solution in a previous comment (replied to João Gomes), you can use that.

Comments are closed.