JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#showimage1" class="popupbox_preview"><img src="http://img-fotki.yandex.ru/get/6437/28349470.50/0_98fd1_19e5474d_XS.jpeg" /></a>
<a href="#showimage2" class="popupbox_preview"><img src="http://img-fotki.yandex.ru/get/4125/24888853.88/0_93384_6a2c8327_XS.jpeg" /></a>

<div class="popupbox" id="showimage1">
	<div class="popupbox_header">
		Заголовок изображения 1
		<div class="popupbox_navigation">
			<a href="#closeimage" title="Назад">◄</a>  <a href="#showimage2" title="Дальше">►</a>  <a href="#closeimage" title="Закрыть">✖</a>
		</div>
	</div>
	<div class="popupbox_image">
		<img src="http://img-fotki.yandex.ru/get/6437/28349470.50/0_98fd1_19e5474d_orig" />
	</div>
</div>

<div class="popupbox" id="showimage2">
	<div class="popupbox_header">
		Заголовок изображения 2
		<div class="popupbox_navigation">
			<a href="#showimage1" title="Назад">◄</a>  <a href="#closeimage" title="Дальше">►</a>  <a href="#closeimage" title="Закрыть">✖</a>
		</div>
	</div>
	<div class="popupbox_image">
		<img src="http://img-fotki.yandex.ru/get/4125/24888853.88/0_93384_6a2c8327_orig" />
	</div>
</div>

CSS

.popupbox_preview {
	cursor: zoom-in;
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
}
	.popupbox_header {
	overflow: hidden;
	font-weight: bold;
	line-height: 2em;
}
	.popupbox_navigation {
	display: inline;
	float: right;
	margin-right: 12px;
}
	.popupbox a {
	font-size: 200%;
	text-decoration: none;
	color: #cccccc;
}
	.popupbox a:hover {
	color: #fff;
}
	.popupbox {
	display: none;
	padding: 7px;
	height: 90%; /* Значение 90% установлено специально, чтобы видеть нижнюю границу. А вообще, тут должно быть 100%.*/
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	text-decoration: none;
	color: #cccccc;
}
	.popupbox:target {
	display: block;
}
	.popupbox_image {
	margin: 7px 14px 0 0;
	border: 4px dashed black;
	overflow: auto;
}

.popupbox_image img {
	width: 100%;
}