JSFiddle - React, Tailwind, and code Playground

by the wazz

HTML

<article><span>1</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>2</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>3</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>4</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>5</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>6</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>

CSS

html{
	font-size: 18pt;
}
body{
	background-color: black;
	font-family: "PT Sans", "Arial", sans-serif;
	font-size: 20pt;
	color: white;
	padding: 0.5rem;
	margin: 0.8rem;
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;
	justify-content: center;
}
article{
	border-style: solid;
	border-color: #202020;
	border-width: 1.5pt;
	padding: 0;
	width: 9.5rem;
	height: 7.5rem;
	background-color: #101010;
  	transition: 202ms;

	text-align: center;
	box-sizing: border-box;

  	font-size: 50pt;
  	cursor: pointer;
}
img{
	object-fit: cover;
	height: 0;
	width: 100%;
	display: block;
	opacity: 0;
	transition: 202ms;
}
article:hover{
	background-color: #1f1f1f;
}
.open{
	cursor: default;
}
.open span{
	display: none;
}
.open img{
	opacity: 1;
}
.open:hover{
	transform: scale(1.8);
}

JavaScript

$('article').click(function() {
			$(this).addClass('open');
});