JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery"><a href="http://placehold.it/450x280/ffcc33"> 
           <figure>
          <img src="http://placehold.it/450x280/ffcc33">
          <figcaption>Test 1</figcaption>
           </figure></a>
           <a href="http://placehold.it/450x280/ffcc33"><figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 2</figcaption>
           </figure></a>

<a href="http://placehold.it/450x280/ffcc33"> 
           <figure>
          <img src="http://placehold.it/450x280/ffcc33">
          <figcaption>Test 3</figcaption>
           </figure></a>
           <a href="http://placehold.it/450x280/ffcc33"><figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 4</figcaption>
           </figure></a>

		   <a href="http://placehold.it/450x280/ffcc33"> 
           <figure>
          <img src="http://placehold.it/450x280/ffcc33">
          <figcaption>Test 5</figcaption>
           </figure></a>
           <a href="http://placehold.it/450x280/ffcc33"><figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 6</figcaption>
           </figure></a>

		   <a href="http://placehold.it/450x280/ffcc33"> 
           <figure>
          <img src="http://placehold.it/450x280/ffcc33">
          <figcaption>Test 7</figcaption>
           </figure></a>
           <a href="http://placehold.it/450x280/ffcc33"><figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 8</figcaption>
           </figure></a>

<a href="http://placehold.it/450x280/ffcc33"> 
           <figure>
          <img src="http://placehold.it/450x280/ffcc33">
          <figcaption>Test 9</figcaption>
           </figure></a>

</div> 
<figure class="pictureView">
<img src="">
<figcaption>Empty</figcaption>
</figure>

CSS

figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .gallery {
         display: flex; justify-content: center;
         flex-wrap: wrap;
      }
      .gallery a, .pictureView figure {
         position: relative;
         margin: 0.5rem;
         border-radius: 15px; overflow:hidden;
         flex: 0 0 250px;
      }
      .gallery img {
         width: 100%;
      }
      .gallery figcaption, .pictureView figcaption {
         background: rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         position: absolute;
         bottom: 0;
         width: 100%;
         padding: 0.3rem 0rem;
      }
.pictureView {
  width: 100vw; height: 100vh; position: fixed; top:0; left:0;
  display:none;
  background-color: rgba(200,200,200,0.9);
}
.pictureView.active {
  display: flex; justify-content:center; align-items:center;
}

JavaScript

let gallery = document.querySelector(".gallery a");
let viewer = document.querySelector(".pictureView");
gallery.addEventListener("click", function(event) {
   if (event.target === gallery) return;
   let fig = event.target.closest("figure");
   if (fig == null) { alert("fail"); return; }
   viewer.querySelector("img").src = fig.querySelector("img").src;
   viewer.querySelector("figcaption").textContent = fig.querySelector("figcaption").textContent
   viewer.classList.add("active");
});
document.body.addEventListener("keydown", function(event) {
   if (event.key === "Escape")
      closeViewer();
});
viewer.addEventListener("click", function(event) {
   if (event.target.closest("figure") === viewer)
      closeViewer();
});
function closeViewer() {
   viewer.classList.remove("active");
}