JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="http://static.geo.de/bilder/df/c9/65049/fullsize/kilian-schoenberger-sagenhaftes-deutschland-07.jpg" alt="Cityscape">
  <h1>1 Lorum</h1>
</div>

<div>
  <img src="http://static.geo.de/bilder/bc/8e/65045/fullsize/kilian-schoenberger-sagenhaftes-deutschland-03.jpg" alt="Cityscape">
  <h1>2 Ipsum</h1>
</div>

<div>
  <img src="http://static.geo.de/bilder/90/67/65043/fullsize/kilian-schoenberger-sagenhaftes-deutschland-01.jpg" alt="Cityscape">
  <h1>3 Lorum</h1>
</div>

<div>
  <img src="http://static.geo.de/bilder/a4/69/65050/fullsize/kilian-schoenberger-sagenhaftes-deutschland-08.jpg" alt="Cityscape">
  <h1>4 Ipsum</h1>
</div>

CSS

body {
  background: #eee url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/pattern.png);
  font-size: 2em;
  font-family: Helvetica, Arial, sans-serif;
}

div {
  background: #eee url(https://images.blogthings.com/thejapanesepatterntest/japanese-pattern-1.png);
  margin: 2em auto;
  width: 100%;
  max-width: 600px;
  position: relative;
  isolation: isolate;
}

div img {
  max-width: 100%;
  mix-blend-mode: luminosity;
}

div h1 {
  position: absolute;
  bottom: -1em;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  font-size: 3em;
  padding: .5em;
  color: #5612fa;
  text-shadow: -1px 2px 2px #333333;
  mix-blend-mode: exclusion;
}

.p {
  text-align: center;
  padding-top: 100px;
  font-size: 13px;
  font-weight: normal;
  font-family: Arial;
}

JavaScript

var imgs = document.querySelectorAll('img');

Array.prototype.forEach.call(imgs, function(img) {
  img.addEventListener("click", function(e) {
			if (this.requestFullscreen) {
        this.requestFullscreen();
      } else if (this.webkitRequestFullScreen) {
        this.webkitRequestFullScreen();
      } else if (this.mozRequestFullScreen) {
        this.mozRequestFullScreen();
      } else if (this.msRequestFullscreen) {
        this.msRequestFullscreen();
      }
  }, false);
});

function reqful(e) {
	
}