.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.

//-------------------------------------------------
// 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);
  }
}