<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap" rel="stylesheet">

<div class="container">
  <h1>Simple image popup effect with vanilla js and css animation</h1>
  <h2>Click on the image</h2>

  <!-- Container for images that will have popup effec -->
  <div class="img-container">
    <img alt=" " src="https://codeorum.com/images/article_images/900/20200726T133520_900.jpg">
    <img alt=" " src="https://codeorum.com/images/article_images/900/20200726T133520_900.jpg">
  </div>

</div>

body {
  margin: 0;
  padding: 0;
  background: #3c72d6;
  background: linear-gradient(to right, #f8d9b1, #ffd857);
  font-family: "Quicksand", sans-serif;
  color: #262626;
}
* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 10px 100px 10px;
  h1 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 500;
  }
  h2 {
    font-weight: 500;
  }
}

.img-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  img {
    cursor: pointer;
    border-radius: 6px;
    width: 48%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),
      0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
  }
}

// container for popup image
.popupContainer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: auto;
  // background of the popup umage
  .popUpBackground {
    transition: all 0.3s ease-in-out;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    &.active {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
  // popup image, you can adjust here animation tranistion time and effect
  .popImage {
    position: relative;
    display: block;
    transition: all 0.3s ease-in-out;
    border-radius: 6px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),
      0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
}

function initImagePopup(elem){
    // check for mouse click, add event listener on document
    document.addEventListener('click', function (e) {
        // check if click target is img of the elem - elem is image container
        if (!e.target.matches(elem +' img')) return;
        else{

            var image = e.target; // get current clicked image

            // create new popup image with all attributes for clicked images and offsets of the clicked image
            var popupImage = document.createElement("img"); 
            popupImage.setAttribute('src', image.src);
            popupImage.style.width = image.width+"px";
            popupImage.style.height = image.height+"px";
            popupImage.style.left = image.offsetLeft+"px";
            popupImage.style.top = image.offsetTop+"px";
            popupImage.classList.add('popImage');

            // creating popup image container
            var popupContainer = document.createElement("div"); 
            popupContainer.classList.add('popupContainer');
            
            // creating popup image background
            var popUpBackground = document.createElement("div"); 
            popUpBackground.classList.add('popUpBackground');

            // append all created elements to the popupContainer then on the document.body
            popupContainer.appendChild(popUpBackground);
            popupContainer.appendChild(popupImage);
            document.body.appendChild(popupContainer);

            // call function popup image to create new dimensions for popup image and make the effect
            popupImageFunction();


            // resize function, so that popup image have responsive ability
            var wait;
            window.onresize = function(){
                clearTimeout(wait);
                wait = setTimeout(popupImageFunction, 100);
            };

            // close popup image clicking on it
            popupImage.addEventListener('click', function (e) {
                closePopUpImage();
            });
            // close popup image on clicking on the background
            popUpBackground.addEventListener('click', function (e) {
                closePopUpImage();
            });


            function popupImageFunction(){
                // wait few miliseconds (10) and change style of the popup image and make it popup
                // waiting is for animation to work, yulu can disable it and check what is happening when it's not there
                setTimeout(function(){      
                    // I created this part very simple, but you can do it much better by calculating height and width of the screen,
                    // image dimensions.. so that popup image can be placed much better
                    popUpBackground.classList.add('active');
                    popupImage.style.left = "15%";
                    popupImage.style.top = "50px";       
                    popupImage.style.width = window.innerWidth * 0.7+"px";
                    popupImage.style.height = ((image.height / image.width) * (window.innerWidth * 0.7))+"px";       
                }, 10);
            }

            // function for closing popup image, first it will be return to the place where 
            // it started then it will be removed totaly (deleted) after animation is over, in our case 300ms
            function closePopUpImage(){
                popupImage.style.width = image.width+"px";
                popupImage.style.height = image.height+"px";
                popupImage.style.left = image.offsetLeft+"px";
                popupImage.style.top = image.offsetTop+"px";
                popUpBackground.classList.remove('active');
                setTimeout(function(){      
                    popupContainer.remove();
                }, 300);
            }
            
        }
    });
}

// Start popup image function
initImagePopup(".img-container") // elem = image container