JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/material-photo-gallery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="m-p-g">
	<div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
		<img src="https://ostriv.pp.ua/photo/0.jpg" data-full="https://ostriv.pp.ua/photo/0.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/1.jpg" data-full="https://ostriv.pp.ua/photo/1.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/2.jpg" data-full="https://ostriv.pp.ua/photo/2.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/3.jpg" data-full="https://ostriv.pp.ua/photo/3.jpg" class="m-p-g__thumbs-img" />
    		<img src="https://ostriv.pp.ua/photo/4.jpg" data-full="https://ostriv.pp.ua/photo/4.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/5.jpg" data-full="https://ostriv.pp.ua/photo/5.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/6.jpg" data-full="https://ostriv.pp.ua/photo/6.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/7.jpg" data-full="https://ostriv.pp.ua/photo/7.jpg" class="m-p-g__thumbs-img" />
		<img src="https://ostriv.pp.ua/photo/8.jpg" data-full="https://ostriv.pp.ua/photo/8.jpg" class="m-p-g__thumbs-img" />
    		<img src="https://ostriv.pp.ua/photo/9.jpg" data-full="https://ostriv.pp.ua/photo/9.jpg" class="m-p-g__thumbs-img" />
            		<img src="https://ostriv.pp.ua/photo/10.jpg" data-full="https://ostriv.pp.ua/photo/10.jpg" class="m-p-g__thumbs-img" />
	</div>

	<div class="m-p-g__fullscreen"></div>
</div>
<script>
var elem = document.querySelector('.m-p-g');

	document.addEventListener('DOMContentLoaded', function() {
		var gallery = new MaterialPhotoGallery(elem);
	});
  
</script>

SCSS

$gallery-width: 100%;
$transition-duration: 0.5s;
body {
  margin: 0;
}
.m-p-g {
	max-width: $gallery-width;
	margin: 0 auto;
	
	&__thumbs {
		
		&-img {
			margin: 0;
			float: left;
			vertical-align: bottom;
			cursor: pointer;
			z-index: 1;
			position: relative;
			opacity: 0;
			filter: brightness(100%);
			-webkit-tap-highlight-color: rgba(black, 0);
			will-change: opacity, transform;
			transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);
			
			&.active {
				z-index: 50;
			}
			
			&.layout-completed {
				opacity: 1;
			}

			&.hide {
				opacity: 0;
			}
			
			&:hover {
				filter: brightness(110%);
			}
		}
	}
	
	&__fullscreen {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		background: rgba(black, 0);
		visibility: hidden;
		transition:
			background .25s ease-out,
			visibility .01s $transition-duration linear;
		will-change: background, visibility;
		backface-visibility: hidden;

		&.active {
			transition:
				background .25s ease-out,
				visibility .01s 0s linear;
			visibility: visible;
			background: rgba(black, 0.95);
		}

		&-img {
			pointer-events: none;
			position: absolute;
			transform-origin: left top;
			top: 50%;
			left: 50%;
			max-height: 100vh;
			max-width: 100%;
			visibility: hidden;
			will-change: visibility;
			transition: opacity $transition-duration ease-out;

			&.active {
				visibility: visible;
				opacity: 1 !important;
				transition:
					transform $transition-duration cubic-bezier(0.23, 1, 0.32, 1),
					opacity $transition-duration ease-out;
			}

			&.almost-active {
				opacity: 0;
				transform: translate3d(0,0,0) !important;
			}
		}
	}
	
	&__controls {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 200;
		height: 20vh;
		background: linear-gradient(to top, transparent 0%, rgba(black, 0.55) 100%);
		opacity: 0;
		visibility: hidden;
		transition: all $transition-duration cubic-bezier(0.23, 1, 0.32,...

JavaScript

$('.m-p-g__fullscreen.active').click(function(){
  	$(this).removeClass('active');
    $('.m-p-g__controls').removeClass('active');
  });