Cover with Play Button - Zing MP3

by Van Hai Le

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="album-square">
	<div class="overlay">
		<i class="far fa-play-circle fa-2x"></i>
	</div>
</div>

CSS

.album-square {
	width: 128px;
	height: 128px;
	background-color: #ccc;
	background-image: url('https://images.unsplash.com/photo-1545199143-c6f9256ec576?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=128&h=128&q=80');
	background-size: cover;
	background-position: center;
	/* margin-right: 16px; */
	color: #fff;
}

.album-square .overlay {
	height: 100%;
	background-color: rgba(0,0,0, .4);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: ease .3s;
}

.overlay i {
	transform: scale(0);
	transition: transform ease .3s;
}

.album-square:hover .overlay {
	opacity: 1;
}

.album-square:hover .overlay i {
	transform: scale(1);
}