<div class="blur">	
</div>	
<div class="bg"></div>

<div class="milk-crate">
<h1>A Digital Record Collection</h1>
<h3>Including Featured Notable Tracks</h3>
	
<div class="album">
	<div class="img-box">
		
		<img src="https://f1.bcbits.com/img/a1752648874_2.jpg" alt="" />
		
	<!--	<div class="menu">
			<span class="fa fa-ellipsis-v">									</span>
			<p>Add to Playlist</p>
		</div>-->
		
		<div class="play">
			<span class="fa fa-play-circle">			</span>
		</div>
		
	<div class="liner-notes">
		<h2>Libertine Dissolves 
				<span class="fa fa-chevron-up"></span>	
		</h2>
		<div class="hide">
		<p>I married into the fly trap
I sunk into suburban sand
Victimized by restlessness
Blacking out in the lion's mouth. </p>
		</div>	
	</div>
	</div>
</div>

<div class="album">
	<div class="img-box">
		
		<img src="https://f1.bcbits.com/img/a2837957003_2.jpg" alt="" />
		
		<div class="play">
			<span class="fa fa-play-circle"></span>
		</div>
		
	<div class="liner-notes">
		<h2>
			Dear Home
			<span class="fa fa-chevron-up"></span>
		</h2>
		<div class="hide">
		<p>I've been shaped as much by those I've left as those I've kept, 
Like an old riverbed dreaming of the oceans it never met.</p>
		</div>
	</div>
	</div>
</div>

<div class="album">
	<div class="img-box">
		
		<img src="https://f1.bcbits.com/img/a3842417721_16.jpg" alt="" />
		
		<div class="play">
			<span class="fa fa-play-circle"></span>
		</div>
		
	<div class="liner-notes">
		<h2>
			Jaguar Shark
			<span class="fa fa-chevron-up"></span>
		</h2>
		<div class="hide">
		<p>We swarm and swim circles around these dark eyed schools. In this sea we are the sharks and you're the prey.</p>
		</div>
	</div>
	</div>
</div>

<div class="album">
	<div class="img-box">
		
		<img src="http://dyingscene.com/wp-content/uploads/propagandhi-supporting-caste.jpg" alt="" />
		
		<div class="play">
			<span class="fa fa-play-circle"></span>
		</div>
		
	<div class="liner-notes">
		<h2>
			Without Love
			<span class="fa fa-chevron-up"></span>
		</h2>
		<div class="hide">
		<p>Just counting down the time it takes for you to comprehend the sheer magnitude of every single precious breath you’ve ever wasted?</p>
		</div>
	</div>
	</div>
</div>

</div>
$width: 240px;
$height: 240px;

$rad: 0.8em;
$transparent: rgba(0,0,0,0.5);
$transparent-lt: rgba(255,255,255,0.1);

body {
	font-size: 62.5%;
	height: 100%;
	background: #000;
	font-family: 'Raleway', sans-serif;
}

* {
	box-sizing: border-box;
}

.blur {
	position: absolute;
	z-index: -2;
	width: 100%;
	height: 110%;
		background: url('http://vtdavy.com/wp-content/uploads/2015/02/life_in_space.jpg')no-repeat;
	background-size: cover;
	filter: blur(8px);
	-webkit-filter: blur(8px);
}

.bg {
		background: $transparent-lt;
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 110%;
}

.milk-crate {
	width:528px;
	overflow:hidden;
	padding:3% 0;
	margin:0 auto;
}

h1, h2, h3, p {
	margin:12px 0;
}

h1 {
	text-align: center;
	font-weight: 200;
	font-size:3em;
	color:white;
}

h2 {
	font-weight:700;
	font-size:2em;
}

h3 {
	color:white;
	text-align: center;
}

p {
	font-size:1.3em;
	font-weight: 200;
	line-height: 1.4;
}

@mixin transition($time) {
	-webkit-transition:$time;
	-moz-transition:$time;
	-o-transition:$time;
	transition:$time;
}

.album {
	float:left;
	height: $height;
	width: $width;
	background: #ccc;
	border-radius: $rad;
	overflow:hidden;
	position:relative;
	box-shadow: 2px 2px 4px 2px $transparent;
	
	margin:6px;
	
	.img-box {
		width:$width;
		height:$height;
		overflow:hidden;
		position:relative;
		
		img {
			max-width:100%;
		}
		
	}
	
	h2 .fa {
		float:right;
		@include transition(0.4s);
	}
	
	.menu {
		position:absolute;
		top:0;
		right:0;
		height:34px;
		width:100%;
		overflow:hidden;
		background: $transparent;
		padding:1% 6%;
		text-align: center;
		color:#fff;
		@include transition(0.4s);
		

		
		.fa {
			cursor:pointer;
			font-size:30px;
			float:right;
			text-shadow: 2px 2px 4px $transparent;
			}
	}
	
	.play {
		position: absolute;
		top:$height / 2 - 50px;
		left:0;
		width:100%;
		text-align: center;
		cursor:pointer;
		font-size:70px;
		color:#fff;
		text-shadow: 2px 2px 4px $transparent;
		@include transition(0.4s);
		
		&:hover {
			transform:scale(1.2);
		}
	}
	
	.liner-notes {
		background:$transparent;
		padding:1% 6%;
		width:100%;
		color:#fff;
		
		position: absolute;
		bottom:0px;
		
		.hide {
			max-height:0px;
			overflow:hidden;
			@include transition(1s);
		}
		
		&:hover {
			
			.hide {
				max-height:1000px;
			}
			
			h2 .fa {
				transform:rotate(180deg);
			}
			
		}	
		
	}
	
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.