style.css

:root {
	--img1: url('https://picsum.photos/id/100/400');
	--img2: url('https://picsum.photos/id/200/400');
	--img3: url('https://picsum.photos/id/300/400');
	--img4: url('https://picsum.photos/id/400/400');
	--img5: url('https://picsum.photos/id/500/400');
}

body {
	margin: 1rem;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body::after {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content: var(--img1) var(--img2) var(--img3) var(--img4) var(--img5);
}

h1 {
	font-weight: 800;
}

h2 {
	font-weight: 500;
	font-size: large;
}

.container {
	display: block;
	position: relative;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 1 / 1;
	margin-bottom: 1rem;
}

.img {
	position: absolute;
	width: 100%;
	height: 100%;
	content: var(--img5);
	z-index: 0;
}

.btn {
	position: absolute;
	width: 50%;
	height: 50%;
	margin: 0;
	border: 1 none black;
	background-color: rgba(0, 0, 0, 0);
	padding: 0;
	z-index: 1;
}

.btn:active,
.btn:focus {
	background-color: rgba(0, 0, 0, 0.3);
}

#btn1 {
	top: 0;
	left: 0;
}

#btn1:active ~ .img,
#btn1:focus ~ .img {
	content: var(--img1);
}

#btn2 {
	top: 0;
	right: 0;
}

#btn2:active ~ .img,
#btn2:focus ~ .img {
	content: var(--img2);
}

#btn3 {
	bottom: 0;
	left: 0;
}

#btn3:active ~ .img,
#btn3:focus ~ .img {
	content: var(--img3);
}

#btn4 {
	bottom: 0;
	right: 0;
}

#btn4:active ~ .img,
#btn4:focus ~ .img {
	content: var(--img4);
}