articles » current » css » card-selection-changes-background

CSS: Card Selection Changes Background

Change the background when a 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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE