JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgblc" id="image_one" tabindex="0">
  <img src="http://www.screenpaper.ru/images/stories/oboi/nature/zima/5/%D0%B7%D0%B8%D0%BC%D0%B0%20(26).jpg" alt="#">
  <span tabindex="0">
    закрыть
   </span>
</div>



<div class="imgblc" tabindex="0">
  <img src="http://www.screenpaper.ru/images/stories/oboi/abstrakt/14/024628%20%28T5%2C%20render%2C%20abstract%2C%20%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B8%29.jpg" alt="#">
  <span tabindex="0">
    закрыть
   </span>
</div>

CSS

img {
  width: 100%;
  height: 100%;
}

.imgblc {
  width: 30%;
  height: 30%;
}

.imgblc:focus {
  top: 0;
  left: 0;
  overflow-y: auto;
  background: rgba(0, 0, 0, .6);
  position: fixed;
  width: 100vw;
  padding: 20px 0;
  height: 100vh;
}

.imgblc:focus img {
  position: fixed;
  width: 90vw;
  margin: 0 5vw;
  height: initial;
}

.imgblc span {
  display: none;
}

.imgblc:focus span {
  display: block;
  position: fixed;
  left: 50%;
  margin-left: -60px;
  top: 30px;
  width: 120px;
  text-align: center;
  padding: 6px 0;
  background: rgba(0, 0, 0, .3);
  border: 1px solid #ddd;
  color: #fff;
  cursor: pointer;
}