<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css">
	<title>Spotify cards</title>
</head>

<body>
	<h2>Recently Played</h2>
	<div class="container">
		<div class="card">
			<div class="group">
				<img class="card-img" src="https://upload.wikimedia.org/wikipedia/en/3/3a/Drake_and_21_Savage_-_Her_Loss.png" alt="her loss">
				<button class="play-button">
					<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M7.5,0,15,16H0Z' transform='translate(16) rotate(90)'/%3E%3C/svg%3E" alt="play">
				</button>
			</div>
			<p class="card-title">Her loss</p>
			<p class="card-artist">Drake, 21 Savage</p>
		</div>

		<div class="card">
			<div class="group">
				<img class="card-img" src="https://upload.wikimedia.org/wikipedia/commons/3/30/Drake-Controlla-2016.jpg" alt="controlla">
				<button class="play-button">
					<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M7.5,0,15,16H0Z' transform='translate(16) rotate(90)'/%3E%3C/svg%3E" alt="play">
				</button>
			</div>
			<p class="card-title">Controlla</p>
			<p class="card-artist">Drake.</p>
		</div>

		<div class="card">
			<div class="group">
				<img class="card-img" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Drake-Too-Good-2016.jpg" alt="too">
				<button class="play-button">
					<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M7.5,0,15,16H0Z' transform='translate(16) rotate(90)'/%3E%3C/svg%3E" alt="play">
				</button>
			</div>
			<p class="card-title">Too Good</p>
			<p class="card-artist">Drake.</p>
		</div>

	</div>

</body>

</html>
body {
	background-color: #121212;
	color: white;
}

p {
	margin: 0px;
}

.container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.card {
	background-color: #181818;
	border-radius: 5px;
	padding: 16px;
	display: flex;
	flex-direction: column;
}

.group {
	position: relative;
}

.card-img {
	border-radius: 5px;
	margin: 16px;
	width: 200px;
	height: 200px;
	object-fit: cover;
}

.play-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #1ed760;
	position: absolute;
	bottom: 0px;
	right: 19px;
	border: none;
	transition: all 0.3s;
	opacity: 0;
}

.card:hover .play-button {
	opacity: 1;
	bottom: 30px;
}

.play-button:hover {
	transform: scale(1.15);
}
.card-title {
	line-height: 26px;
	padding-bottom: 5px;
}

.card-artist {
	color: #b3b3b3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.