Adding hover states to Cargo Thumbnail Indexes using CSS

styles.css

thumbnail.linked {
	position: relative;
	overflow: hidden;
}

.thumbnail.linked figcaption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	color: white;
	padding: 2rem;
	margin-top: 0;
	margin-bottom: 0;
	background: rgba(0,0,0,.2);
	border-radius: 1.5rem;
	opacity: 0;
	transition: opacity linear 400ms;
	background-size: cover;
	background-repeat: no-repeat;
}

.thumbnail.linked:hover figcaption {
	opacity: 1;
}

.thumbnail.linked[href="#page-1"] figcaption {
	background-image: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExNTFuZnVxaHQybHplYWs4NW8xam1pMDdoeWV1N3kyaTlwaXZha2dnYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GuTqAQ2R6NlZK/giphy.gif');
}

.thumbnail.linked[href="#page-2"] figcaption {
	background-image: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjFtMDNwYzBpeWx0N2M2eTBpZXRjOXN4ZzJiZnhrdGUzdWl2YTB6NSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lSHRuaSISSxnW/giphy.gif');
}