<div class="card">
	<figure class="background">
		<img src="https://picsum.photos/400/560/?random">
	</figure>
	<ul class="list mask">
		<li>Thank you for being a friend</li>
		<li>Travelled down the road and back again</li>
		<li>Your heart is true you're a pal and a confidant</li>
		<li>Love exciting and new</li>
		<li>Come aboard were expecting you</li>
		<li>Love life's sweetest reward</li>
		<li>Let it flow it floats back to you</li>
		<li>Well we're movin' on up to the east side</li>
		<li>To a deluxe apartment in the sky</li>
		<li>Baby if you've ever wondered - wondered whatever became of me</li>
		<li>I'm living on the air in Cincinnati</li>
		<li>Cincinnati WKRP</li>
		<li>All of them had hair of gold like their mother the youngest one in curls</li>
		<li>If you have a problem if no one else can help and if you can find them maybe you can hire The A-Team</li>
		<li>Believe it or not I'm walking on air</li>
		<li>I never thought I could feel so free</li>
	</ul>
	<footer class="instructions">
		Move the <code>mask</code> class around to test it ✌️
	</footer>
</div>

.mask {
	//https://caniuse.com/#search=mask-image
	-webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 0, rgba(255,255,255, 1) 40%);
	mask-image: linear-gradient(to top, rgba(255,255,255,0) 0, rgba(255,255,255, 1) 40%);
}


// ------
// UI details
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|Montserrat');

$footer-height: 30px;
$list-height: 200px;
$list-gutter: 15px;

html,body {
	overflow: hidden;
	font-family: 'IBM Plex Mono', monospace;
}

body {
	height: 100vh;
	width: 100vh;
	background: linear-gradient(-45deg, #4389A2, #5C258D) no-repeat;
}

.card {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: (($footer-height * 2) + $list-height + ($list-gutter * 2));
	min-width: 400px;
	box-shadow: 10px 10px 140px 0px rgba(0,0,0,.4);
	transform: translate3d(-50%,-50%,0);
	overflow: hidden;
}

.background {
	position: relative;
	z-index: 1;
	img {
		display: block;
	}
}

.list {
	position: absolute;
	right: $list-gutter;
	bottom: $footer-height;
	left: $list-gutter;
	z-index: 2;
	height: $list-height;
	padding: 20px;
	overflow: auto;
	color: #222;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.4;
	background: #fff;
	border-radius: 5px 5px 0 0;
	
	li + li {
		margin-top: 5px;
	}
	
	&::-webkit-scrollbar {
	  width: 5px;
	  background-color: #E9E9E9;
	}
	&::-webkit-scrollbar-thumb {
	  background-color: #ddd;
	  border-radius: 50vh;
	}
	
}

.instructions {
	position: absolute;
	bottom: 0;
	z-index: 3;
	box-sizing: border-box;
	width: 100%;
	height: $footer-height;
	color: #fff;
	font-size: 11px;
	line-height: $footer-height;
	text-align: center;
	background: #222;
}