okayguys,
как вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#gallery1 {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
-moz-user-select: none;
user-select: none;
}
#gallery1 img {
width: auto;
height: 150px;
margin-bottom: 12px;
margin-right: 12px;
cursor: zoom-in;
transition: all .8s ease-in-out;
}
#gallery1 img:focus {
position: fixed;
margin: auto;
transform: scale(3);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 31;
outline: none;
pointer-events: none;
}
</style>
</head>
<body>
<div id="gallery1">
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-1.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-2.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-3.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-5.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-6.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-7.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-8.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-4.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-9.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-10.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-11.jpg" alt="" tabindex="0" />
<img src="http://mrsalvador.ru/old/img/superbox1/superbox-full-12.jpg" alt="" tabindex="0" />
</div>
</body>
</html>