.container
	%h2 Hover Here
	%h2 To Learn More
	.text
		.inner
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tortor sit amet felis accumsan, at ornare diam placerat. Cras bibendum lobortis quam ut venenatis. Mauris eu mi in erat sagittis cursus. Vivamus in euismod diam, et interdum odio. Suspendisse vel rhoncus metus, eu auctor neque. Lorem ipsum dolor sit amet.
View Compiled
//-------------------------------------------------
// Colors

$green-light: #00ff72;
$blue-lightest: #00fcff;
$blue-dark: #013a52;

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Condensed:700);

.container {
	max-width: 720px;
	margin: 90px auto;
}

h2 {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 110px;
	letter-spacing: -0.05em;
	text-align: center;
	line-height: 1;
	color: $blue-dark;
	font-family: 'Roboto Condensed', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	transform-origin: center bottom;
	transition: all 0.4s;
	
	&:first-of-type {
		transform-origin: center top;
	}
	
	.container:hover & {
		transform: scaleY(0);
	}
}

.text {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	
	font-family: 'Open Sans';
	
	transform: translateY(-50%);
	transition: all 0.3s;
	
	&:before,
	&:after {
		display: block;
		margin: 50px 0;
		height: 10px;
		background: linear-gradient(to right, $blue-lightest, $green-light);
		opacity: 0.75;
		content: '';
		
		transition: all 0.3s;
	}
	
	&:hover {
		background: white;
		
		&:before,
		&:after { margin: 0; }
	}
}

.inner {
	padding: 0 60px;
	max-height: 0;
	overflow: hidden;
	background: white;
	line-height: 1.5;
	font-size: 18px;
	font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	
	transform: scale(0);
	
	transition: all 0.3s;
	
	.container:hover & {
		padding: 60px;
		max-height: 300px;
		transform: scale(1);
	}
}
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/80729/helpers.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js