007 Image PopUp Final Source Code

<html>

<head>
    <title>JavaScript</title>
    <style>
        .hide {
            display: none;
        }
        
        .overlay {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .66);
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .output {
            width: 60%;
            height: 40%;
            background-color: white;
            position: absolute;
            top: 30%;
            left: 20%;
            overflow: hidden;
            z-index: 100;
        }
        
        .output img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .output span {
            position: absolute;
            top: 10px;
            right: 5%;
            z-index: 105;
            cursor: pointer;
            color: white;
            background-color: black;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="pop"> <img src="https://via.placeholder.com/150/09f?text=image1"> <img src="https://via.placeholder.com/150/E4E?text=image2"> <img src="https://via.placeholder.com/150/1f1?text=image3">
    
    <img src="https://via.placeholder.com/150/6f1?text=image4"> 
    <img src="https://via.placeholder.com/150/177?text=image5"> </div>
    <div class="show hide">
        <div class="overlay close"> </div>
        <div class="output"> <span class="close">X</span> <img src=""> </div>
    </div>
    <script>
        const output = document.querySelector(".output");
        const show = document.querySelector(".show");
        const close = document.querySelectorAll(".close");
        const images = document.querySelectorAll(".pop img");
        images.forEach(function (ele) {
            ele.addEventListener("click", popImage);
        })
        close.forEach(function (ele) {
            ele.addEventListener("click", function () {
                show.classList.add("hide");
            })
        })

        function popImage(e) {
            output.querySelector("img").setAttribute("src", this.src);
            show.classList.remove("hide");
        }
    </script>
</body>

</html>