JSFiddle - React, Tailwind, and code Playground

HTML

<div class="preview-wrap">
    <img id="preview" src="https://2ch.hk/web/thumb/99742/14840707884430s.jpg" data-img="image"><!--Превьюшка-->
</div>
<img id="image" src="https://2ch.hk/web/src/99742/14840707884430.png"><!--Полная картинка-->
<div class="image-wrap"></div><!--Темный фон-->

CSS

body {
  position:relative;
}
#preview {
  display:block;
  width:100px;
  height:auto;
  margin:0 auto;
  cursor:pointer;
}
.preview-wrap {
  
}
#image {
  display:none;
  width:60%;
  height:auto;
  border-radius:5px;
  border:5px solid #fff;
  position:fixed;
  top:10%;
  left:20%;
  z-index:10;
}
#image.active {
  display:block;
}
.image-wrap {
  display:none;
  background:rgba(0,0,0,.8);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9;
} 
.image-wrap.active {
  display:block;
}

JavaScript

var preview = document.getElementById("preview");//выбрали превьюшку по id
var image_wrap = document.getElementsByClassName("image-wrap")[0];//выбрали темный фон по классу
if(preview.hasAttribute("data-img")){//если у превьюшки есть атрибут data-img, то
	var image = document.getElementById(preview.getAttribute("data-img")); //берем картинку по id, указанному в data-img превьюшки
  preview.addEventListener('click',function(){//устанавливаем обработчик события клика на превьюшку
    image.classList.add("active"); // при клике картинке и темному фону добавим класс active, чтобы css сделал свое дело
    image_wrap.classList.add("active");
    image_wrap.addEventListener('click',function(){ //ставим обработчик события на темный фон, дабы можно было закрыть большую картинку
    	image.classList.remove("active"); //удаляем класс active на картинке и темном фоне
    	image_wrap.classList.remove("active");
    });
  });
}