You can use a lightbox to do it.

There is a simple example in this link:

http://lokeshdhakar.com/projects/lightbox2/

The span elements should be completely removed and its classes placed on the image elements themselves.

Also, you have a nested section element that isn't doing anything for you.

Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.

img { 
  width:200px;
  border:1px solid black; /* This is only added for testing purposes*/
}

.thumbnail:hover {
   width: 500px;
   height:auto;
   position:relative;
   /* push image to the right by 1/2 the screen width and 1/2 the image width */
   margin-left:calc(50% - 250px);
}

<section id="main">
  <div class="inner">
    <div class="box alt">
      <div class="row 50% uniform">
         <div class="4u">
           <figure>
             <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>

         <div class="4u">
           <figure>
             <img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
         <div class="4u">
           <figure>
             <img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
             <figcaption>Marble</figcaption>
           </figure>
         </div>
         
       </div>
     </div>
   </div>
 </section>

Seems that you are missing some CSS rules.

Let's have a look on this line:

popup.classList.toggle("show");

The toggle function here will add a class show class if the element popup does not have one, otherwise remove it.

That means the item with class popuptext should not display by default and unless the show class is added.

Therefore, you should define 2 CSS styles like the following:

.popuptext.show {
  display: inline-block; // show element when you have the class name 'show'
}
.popuptext {
  display: none; // hide by default
}

Here is a working example: https://jsfiddle.net/3bmqdcsg/

I edited your codepen a bit. So what I done:

• removed your on click handler
• added one handler for all clicks
• applied it only for your images
• added id for modal-img

I don't recommend you to use multiple ids with the same value. Would be better to use classes instead

// 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("modal-img");
var captionText = document.getElementById("caption");
// img.onclick = function(){
//   modal.style.display = "block";
//   modalImg.src = this.src;
//   captionText.innerHTML = this.alt;
// }


document.addEventListener("click", (e) => {
  const elem = e.target;
  if (elem.id==="myImg") {
    modal.style.display = "block";
    modalImg.src = elem.dataset.biggerSrc || elem.src;
    captionText.innerHTML = elem.alt; 
  }
})

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

#myImg {

  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}


#myImg2 {

  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg2:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* 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 */
}

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

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

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

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

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

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

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

<img style="width:30%" id="myImg" class="img-fluid" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
data-bigger-src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"
>

 <img style="width:28%"  id="myImg" class="img-fluid" src="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg">
 <img style="width:29%"  id="myImg" class="img-fluid" src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg">

                                                    <!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img id="modal-img" class="modal-content"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQS2ol73JZj6-IqypxPZXYS3rRiPwKteoD8vezk9QsRdkjt3jEn&usqp=CAU">
    
  
  <div id="caption"></div>
</div>