<div class="card">
  <div class="card-image">
    <h1>Get Lost In the Woods</h1>
  </div>
  <div class="card-body">
    <div class="controls">
      <a data-action="drawer" href="#">
        <i class="ion-android-arrow-up up"></i>
        <i class="ion-android-arrow-down down"></i>
      </a>
      <a data-action="share" href="#">
        <i class="ion-android-share-alt"></i>
      </a>
      <a data-action="bookmark" href="#">
        <i class="ion-android-bookmark"></i>
      </a>
      <a data-action="favorite" href="#">
        <i class="ion-android-favorite"></i>
      </a>
    </div>
    <h1>Get Lost In the Woods</h1>
    <p>
      Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. 
    </p>
  </div>
</div>

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500');

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  background: #ff2a68;
  background: -moz-linear-gradient(30deg,  #ff2a68 0%, #5ac8fb 100%);
  background: -webkit-linear-gradient(30deg,  #ff2a68 0%,#5ac8fb 100%);
  background: linear-gradient(30deg,  #ff2a68 0%,#5ac8fb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2a68', endColorstr='#5ac8fb',GradientType=1 );
}

.card {
  /* Remove this for use */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
}

.card {
  display: block;
  position: relative;
  width: 500px;
  height: 260px;
  border-radius: 2px;
  background: #FAFAFA;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card .card-image {
  display: block;
  position: relative;
  width: 500px;
  height: 210px;
  background-image: url('https://4.bp.blogspot.com/-T_k03UFtS8k/U96RDVp8ebI/AAAAAAABF5E/4107zIbo29U/s0/Google+IO+Landscape_HD.jpg');
  background-size: cover;
  background-position: 50% 20%;
  
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card.active .card-image {
  background-position: 50% 50%;
}

.card .card-image h1 {
  position: absolute;
  bottom: 5px;
  left: 10px;
  margin: 0;
  padding: 0;
  color: #FAFAFA;
  font-weight: 300;
  
  transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}

.card.active .card-image h1 {
  bottom: 100px;
}

.card .card-body {
  position: absolute;
  display: block;
  bottom: -210px;
  left: 0;
  width: 500px;
  height: 260px;
  background: #FAFAFA;
  padding: 0 15px;
  box-sizing: border-box;
  
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card.active .card-body {
  bottom: 0;
}

.card .card-body .controls {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
}

.card .card-body .controls a {
  position: relative;
  display: block;
  float: right;
  height: 50px;
  width: 50px;
  color: #737373;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card .card-body .controls a[data-action="drawer"] {
  float: left;
}

.card .card-body .controls a[data-action="drawer"] i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  transition: opacity 0.32s ease, transform 0.32s ease, color 0.22s ease;
}

.card .card-body .controls a[data-action="drawer"] i.down {
  opacity: 0;
  transform: translateX(-50%) rotate(180deg);
}

.card.active .card-body .controls a[data-action="drawer"] i.down {
  opacity: 1;
  transform: translateX(-50%) rotate(0deg);
}

.card .card-body .controls a[data-action="drawer"] i.up {
  opacity: 1;
  transform: translateX(-50%) rotate(0deg);
}

.card.active .card-body .controls a[data-action="drawer"] i.up {
  opacity: 0;
  transform: translateX(-50%) rotate(180deg);
}

.card .card-body .controls a:hover {
  color: #4183D7;
}

.card .card-body .controls a[data-action="share"]:hover {
  color: #4183D7;
}

.card .card-body .controls a[data-action="bookmark"]:hover {
  color: #F9BF3B;
}

.card .card-body .controls a[data-action="favorite"]:hover {
  color: #D24D57;
}

.card .card-body h1 {
  display: block;
  padding: 0;
  margin: 0 0 20px 0;
  color: #323232;
  font-size: 20px;
}

.card .card-body p {
  display: block;
  overflow: hidden;
  margin: 0;
  color: #737373;
  font-size: 16px;
  text-align: left;
  opacity: 0;
  padding: 40px 0 0 0;
  font-weight: 400;
  
  transition: padding 0.4s cubic-bezier(.25,.8,.25,1), opacity 0.5s cubic-bezier(.25,.8,.25,1);
  transition-delay: 0.1s;
}

.card.active .card-body p {
  opacity: 1;
  padding: 0;
}

$('body').on('click', '[data-action="drawer"]', function() {
  $(this).closest('.card').toggleClass("active");
});