JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<section id="pictures">
  <div id="pic_cnt">
    <div><div><img src="Images/18.jpg"></a>
    </div>
    <div><img src="Images/5.jpg"></a>
    </div>
    <div><img src="Images/6.jpg"></a>
    </div>
    <div><img src="Images/14.jpg"></a>
    </div>
    <div><img src="Images/16.jpg"></a>
    </div>
    <div><img src="Images/19.jpg"></a>
    </div>
    <div><img src="Images/9.jpg"></a>
    </div>
    <div><img src="Images/17.jpg"></a>
    </div>
    <div><img src="Images/3.jpg"></a>
    </div>
    <div><img src="Images/15.jpg"></a>
    </div>
    <div><img src="Images/7.jpg"></a>
    </div>
    <div><img src="Images/10.jpg"></a>
    </div>
  </div>
  <div id="modal">
    <div id="modal_window">
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
      <div class="modal_pic"></div>
    </div>
  </div>
</section>

CSS

#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background-color: rgba(1, 1, 1, .8);
}

#modal_window {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 55%;
  width: 55%;
}

.modal_pic {
  width: 100%;
  height: 100%;
  ;
  position: absolute;
  opacity: 0;
}

.current {
  opacity: 1;
}

JavaScript

let modal = document.getElementById('modal');
let clickedPic = document.querySelectorAll('#pic_cnt img');
let modalPic = document.querySelectorAll('#modal_window div');

for (let i = 0; i < clickedPic.length; i++) {
  clickedPic[i].addEventListener('click', openModal);
}

function openModal(event) {
	console.log(event.target);
  var bg = event.target.src;
  
  modalPic.style.backgroundImage = "url('"+bg+"')";
  
  modal.style.display = "block";
}