<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>

<div class="card_wrap">
	<div class="card_body">
		<div class="card_body-gradient"></div>
		<div class="description">
			<h2>&#47;Everest summits&#47;</h2>
			<h1>Everest</h1>
		</div>
		<div class="footer">
			<h3><b>Asia</b>8.848m</h3>
		</div>
	</div>
</div>

*{box-sizing: border-box;}
html,body{height: 100%;}
body{font-family: 'Roboto Condensed', sans-serif;}

.card {
	
	&_wrap {
		position: relative;
		display: flex;
		height: 100%;
		background-color: #5F5F5F;
		
		&:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(https://s-media-cache-ak0.pinimg.com/originals/37/e6/64/37e664b39146247e2312343115ab165a.png);
		  background-size: cover;
			background-size: auto 800px;
		  background-position: 50% 50%;
			background-repeat: no-repeat;
		}
	}
	
	&_body {
		position: relative;
		margin: auto;
		height: 0;
		width: 360px;
		box-shadow: -25px 25px 60px 5px rgba(0, 0, 0, 0.5), -60px 60px 100px 13px rgba(0, 0, 0, 0.27);
		overflow: hidden;			
		transition: height .3s ease-in-out;
		
		.description,
		.footer {
			position: absolute;
			left: 35px;
			color: transparent;
			transition: all .5s ease-in-out .5s;
		}
		
		.description {
			top: 380px;
		}
		.footer {
			bottom: 135px;
		}
		
		h3, h2, h1{
			text-transform: uppercase;
		}
		
		h3 {
			font-weight: 300;
		}
		
		h2 {
			font-weight: 400;
			font-size: 14px;
		}
		
		h1 {
			font-weight: 600;
			font-size: 34px;
		}
		
		b {
			font-weight: 600;	
			margin-right: 5px;
		}
		
		&-gradient {
			position: absolute;
			top: -290px;
			height: 800px;
			width: 100%;
			background: linear-gradient(to bottom, rgba(201, 230, 255, 0.19) 100px, #0600FE 500px);
			transition: top .3s ease-in-out .3s;
		}
		
		&.active {
			height: 510px;
			
			.card_body-gradient {
				top: 0;
			}
			
			.description {
				top: 280px;
				color: #fff;
			}
			.footer {
				bottom: 35px;
				color: #fff;
			}
		}
	}
}

var card = $('.card_body');

setTimeout(function(){
  card.addClass('active');
}, 500);