modals - 01

            <div>
              <img id="Img" src="4.jpg" alt="Sailing" style="width:100%;max-width:30vw">
              <!-- The Modal -->
              <div id="modal" class="modal">
                  <span class="close">×</span>
                  <img class="modal-content" id="img01">
                  <div id="caption"></div>
              </div>
            </div>
            <style>
              Img {border-radius: 2vw; cursor: pointer; transition: 0.3s;margin-left: 1vw;}
              #Img:hover {opacity: 0.7;}
              .modal {display: none; position: fixed; z-index: 1;  padding-top: 5vw; left: 0;
                  top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); 
                  background-image:repeating-linear-gradient(95deg, red, yellow, black); }
              .modal-content {margin: auto; display: block; width: 100%; max-width: 80vw;}
              #caption {margin: auto; display: block; width: 100%; max-width: 80vw; text-align:
                center; color:red; padding: 1vw 0; height: 15vw;}
              .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);}
              }
              
              .close {position: absolute;top: 1.5vw; right: 6vw; color: darkred; font-size: 
                ; font-weight: bold; transition: 0.3s; }
              .close:hover,.close:focus {color: green; text-decoration: none; cursor:
                pointer; }
              
              /* 100% Image Width on Smaller Screens */
              @media only screen and (max-width: 700px){
                .modal-content {width: 100%;}
              }
            </style>
            <script>
                // Get the modal
                let modal = document.getElementById("modal");
                
                // Get the image and insert it inside the modal - use its "alt" text 
                as a caption
                let img = document.getElementById("Img");
                let modalImg = document.getElementById("img01");
                let captionText = document.getElementById("caption");
                
                img.onclick = function(){
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }
                
                // Get the <span> element that closes the modal
                let span = document.getElementsByClassName("close")[0];
              
                // When the user clicks on <span> (x), close the modal
                span.onclick = function() { 
                modal.style.display = "none";
                }
            </script>