Change the Background When Card is Selected Using Only HTML and CSS

Here is a way to change the background when the user selects a card to see. This is NOT compatible with Internet Explorer.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Change Background</title>
	<style>
	* {
		box-sizing: border-box;
	}
	body {
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		background-color: black;
		background-image: url(https://picsum.photos/id/1044/1920/1080);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.home {
		position: absolute;
		bottom: 15px;
		left: 25px;
		z-index: 1;
	}
	.home a {
		color: rgba(255,255,255,0.5);
		text-decoration: none;
		font-weight: 900;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	main {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
	.col {
		width: 33.333333%;
		float: left;
		border-left: 2px solid rgba(0,0,0,0.33);
		height: 100%;
		z-index: 0;
	}
	.col:nth-child(1) {
		border-left: none;
	}
	.num {
		position: relative;
		height: 100%;
	}
	.num h1 {
		font-size: 12.5vmax;
		text-align: center;
		margin: 0;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		padding: 4vmin;
	}
	.num a {
		display: block;
		text-decoration: none;
		color: rgba(0,0,0,0.5);
		transition: .5s;
	}
	.num a:hover {
		color: rgba(0,0,0,0.75);
		border: 1vmin solid rgba(0,0,0,0.75);
	}
	.card {
		position: absolute;
		min-height: 33vh;
		overflow: hidden;
		top: 50%;
		transform: translateY(-50%);
		padding: 2vmin;
		background-color: rgba(0,0,0,0.67);
		color: silver;
		text-align: center;
		transition: 1s;
		visibility: hidden;
		opacity: 0;
	}
	.card h2 {
		font-size: 5vmin;
		margin: 0;
		padding: 0;
	}
	.card p {
		font-size: 3vmin;
	}
	.back {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		pointer-events: none;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		visibility: hidden;
		opacity: 0;
		transition: .5s;
	}
	.back-1 {
		background-image: url(https://picsum.photos/id/10/1920/1080);
	}
	.back-2 {
		background-image: url(https://picsum.photos/id/296/1920/1080);
	}
	.back-3 {
		background-image: url(https://picsum.photos/id/137/1920/1080);
	}
	.col:target .back,
	.col:target .card {
		visibility: visible;
		opacity: 1;
	}
	</style>
</head>
<body>

	<main>
		<div class="col" id="col-1">
			<div class="num">
				<h1><a href="#col-1">1</a></h1>
				<div class="card">
					<h2>Lorem ipsum dolor sit amet.</h2>
					<p>Lorem ipsum dolor, sit amet consectetur
						sit amet consectetur, adipisicing elit.
						Dicta, voluptas?</p>
				</div>
			</div>
			<div class="back back-1"></div>
		</div>
		<div class="col" id="col-2">
			<div class="num">
				<h1><a href="#col-2">2</a></h1>
				<div class="card">
					<h2>Lorem ipsum dolor sit amet.</h2>
					<p>Lorem ipsum dolor, sit amet consectetur
						adipisicing elit. Facere, incidunt
						repudiandae voluptate?</p>
				</div>
			</div>
			<div class="back back-2"></div>
		</div>
		<div class="col" id="col-3">
			<div class="num">
				<h1><a href="#col-3">3</a></h1>
				<div class="card">
					<h2>Lorem ipsum dolor sit amet.</h2>
					<p>Lorem ipsum dolor, sit amet consectetur
						repudiandae voluptate?</p>
				</div>
			</div>
			<div class="back back-3"></div>
		</div>
	</main>
	<div class="home"><a href="#!">home</a></div>

</body>
</html>

Coding Video

https://youtu.be/hEHrAHbGdMc