JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgblc" id="image_one">
  <img src="http://www.screenpaper.ru/images/stories/oboi/nature/zima/5/%D0%B7%D0%B8%D0%BC%D0%B0%20(26).jpg" alt="#">
</div>

<a href="#" data-img="one" class="open_image">развернуть</a>



<div class="imgblc" id="image_two">
  <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="#">
</div>

<a href="#" data-img="two" class="open_image">развернуть</a>

CSS

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

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

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

.imgblc.active img {
  width: 90vw;
  margin: 20px 5vw;
  height: initial;
}

JavaScript

$('.imgblc').on('click', function() {
  if ($(this).hasClass('active')) $(this).removeClass('active');
});

$('.open_image').on('click', function() {
  $data = $(this).data('img');
  $('#image_' + $data).addClass('active');
});