Untitled

<!doctype html>
<html>
<head>
  <title> Image preview  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="preview.css">
  <script src="preview.js"></script>
  <script>

    window.onload = function() {
      Preview.init();
    };
  </script>
</head>
<body>
 <ul>
   <li><a href="https://courses.oreillyschool.com/advancedjavascript
      /homework/images/image1.jpg" data-preview="image1">Mt. Rainier,
      1</a></li>
   <li><a href="https://courses.oreillyschool.com/advancedjavascript
     /homework/images/image2.jpg" data-preview="image2">Mt. Rainier,
     2</a></li>
   <li><a href="https://courses.oreillyschool.com/advancedjavascript
     /homework/images/image3.jpg" data-preview="image3">Mt. Rainier,
     3</a></li>
 </ul>
</body>
</html>

.previewOverlay {
      position: absolute;
      display: none;
      top: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
    }
    .previewOverlay img {
      position: relative;
      border: 20px solid white;
      border-radius: 10px;
      top: 50px;
      left: 50px;
    }
    .close {
      position: absolute;
      top: 0px;
      left: 0px;
      color: #fdfdfd;
      font-size: 50px;
      text-shadow: 0px 0px 5px black;
    }
    .close:after {
      content: "2717";
    }
   .close:hover {
      color: orange;
    }

function Preview () {
 var mtnPics = document.querySelectorAll("a");
 console.log(mtnPics);
 mtnPics.addEventListener("click", function(event) {
  event.preventDefault()
  });

 for (var i = 0; i < mtnPics.length; i++) {
  mtnPics[i].onclick = showPicture;
}

function showPicture (pictureURL) {
  var picPicked = document.getElementById("a").value;
  console.log(picPicked);

 //Create Div's for image display.
 var ul = document.getElementById("ul");
 var picDiv = document.createElement("div");
 picDiv.setAttribute("class", "previewOverlay");
 var imgDiv = document.createElement("div");
 imgDiv.setAttribute("class", "previewOverlay img");

 var imgSelected = document.getElementById("a").value;
 console.log(imgSelected);

 imgDiv.src = imgSelected;

 var buttonClose = document.createElement("button");

 //Assign divs and buttons
 buttonClose = document.setAttribute("class", "close");

 ul.appendChild(imgDiv);
 imgDiv.appendChild(pictureURL);
 imgDiv.appendChild(buttonClose);
 picDiv.appendChild(imgDiv);

 picDiv.insertBefore(ul, picDiv.firstChild);

 //document.body.appendChild(picDiv);

 buttonClose.onclick = closePicture;
  }


 function closePicture(targetURL) {
   document.removeElement('picDiv');
 }

}