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