JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="header">

</div>

<div class="gallery_container">

<a href="#" onclick="open1()">
<div class="gallery_item">
<img src="http://www.hloe.co.uk/images/600x300.jpg">
<div>Food & Drink</div>
</div></a>

<div class="gallery_item">
<img src="http://www.hloe.co.uk/images/300x450.jpg">
<div>Music</div>
</div>

<div class="gallery_item">
<img src="http://www.hloe.co.uk/images/600x300.jpg">
<div>People</div>
</div>

<div class="gallery_item">
<img src="http://www.hloe.co.uk/images/300x450.jpg">
</div>

<div class="gallery_item">
<img src="http://www.hloe.co.uk/images/600x300.jpg">
</div>



</div>


<div id="screen1" class="screen1">SCREEN 1 - <a href="#" onclick="open2()"> Open</a> - <a href="#" onclick="open1()">Close</a></div>

<div id="screen2" class="screen2">SCREEN 2 - <a href="#" onclick="open2()">Close</a></div>

CSS

html {}
body {margin:0;position:relative;font-size:10px;}
.header {height:20px;background-color:black;}

.gallery_container {
  max-width:1230px;margin:auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: auto;
  align-content: center;
  gap: 10px;
}
.container:after {
  display: block;
  content: " placeholder ";
  margin: 1px;
  flex: 999 999 auto;
}
.gallery_item {position:relative;
  flex: 0 0 auto;width: 300px;
  height: 300px;
overflow:hidden;
  border-radius:8px;
  cursor:pointer;
}

.gallery_item img {
  width: 300px;
  height: 300px;
  object-fit: cover;
transition:all 0.5s ease;
}

.gallery_item:hover img {
transform: scale(1.1);
transition:all 0.5s ease;
}

.gallery_item div {
  position:absolute;top:0;left:0;
  width:100%;height:100%;
display: flex;
  align-items: center;
  justify-content: center;
  color:#ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  font-family:Arial;
  font-size:2.6em;
  border-radius:8px;
}


.screen1, .screen2 {position:absolute;top:0;left:0;width:100%;min-height:100%;background-color:#000000;color:#ffffff;display:none;}

.screen_opened {display:block;}

JavaScript

function open1() {
var screen1 = document.getElementById('screen1');

if (screen1.className == "screen1") {screen1.className = "screen1 screen_opened"} else {screen1.className = "screen1"}

}

function open2() {
var screen2 = document.getElementById('screen2');

if (screen2.className == "screen2") {screen2.className = "screen2 screen_opened"} else {screen2.className = "screen2"}

}