index.html

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>PopoUp Image</title>
            <script src="https://kit.fontawesome.com/e4a223b072.js" crossorigin="anonymous"></script>
            <link href="style.css"rel="stylesheet"type="text/css">
            <link href="images/favicon.png"rel="icon"type="image/icon">
        </head>
    <body>

        <div class="container"> <!--Full image division-->
            <img class="image" src="images/1.jpg" alt="Image">
            <img class="image" src="images/2.jpg" alt="Image">
            <img class="image" src="images/3.jpg" alt="Image">
            <img class="image" src="images/4.jpg" alt="Image">
            <img class="image" src="images/5.jpg" alt="Image">
            <img class="image" src="images/6.jpg" alt="Image">
        </div>

        <!--pop up image-->
        <div class="popupImage">
            <a href="images/1.jpg"download><button class="downloadBtn"><i class="fas fa-download"></i>Download</button></a>
            <h3 class="closeText">Close</h3>
            <img class="popimg">
        </div>
        
        <!-- dark-on-back  -->
        <div class="darkOnBack"></div>


        <span>Project by <a href="https://sites.google.com/view/projectsgallery/"target="_blank">S.M.Abtahi Noor</a></span>
        <script src="script.js"></script>
    </body>
    </html>