JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery1">
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-1.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-2.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-3.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-5.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-6.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-7.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-8.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-4.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-9.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-10.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-11.jpg" alt="" tabindex="0" />
	</div>
	<div class="item">
		<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-12.jpg" alt="" tabindex="0" />
	</div>
</div>

CSS

#gallery1{
  position: relative;
}

#gallery1 .item{
	display:inline-block;
	width:24%;
	padding:0;
	margin:0 0 10px;
	text-align:center;
}
#gallery1 .item img{
	max-width:100%;
	max-height:150px;
}

#gallery1 img:focus {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  margin:auto;
  z-index: 31;
  max-width: 100%;
  max-height: 100%;
  outline: none;
  pointer-events: none;
}

#gallery1 img:focus ~ div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(240,240,240,.9);
  cursor: zoom-out;
}