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 May Also Like

Leave a Comment