<img 
    src="http://eisenbm.edumedia.ca/codepen/images/cat-300.jpg"
    alt="A kitten playing with a flower"
    data-large="http://eisenbm.edumedia.ca/codepen/images/cat-2400.jpg"
    data-source="Image by Dimitri Houtteman from Pixabay">

<div class="modal"></div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  
  height: 100%;
}

img {
  max-width: 100%;
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  
  display: grid;
  justify-content: center;
  align-content: center;
  
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  padding: 25px;
  
  background-color: rgba(255,255,255, 0.9);
  opacity: 0;
  visibility: hidden;
}

.show {
  opacity: 1;
  visibility: visible;
}

const $img = document.querySelector('img')
const $modal = document.querySelector('.modal')

$img.addEventListener('click', function () {
    $modal.innerHTML = `
    <img src="${$img.dataset.large}">   
    <small>${$img.dataset.source}</small>`
    $modal.classList.add('show')
})

$modal.addEventListener('click', function () {
  $modal.classList.remove('show')
})