<div class="card">
  <div class="card__content">
    <div class="card__content-inner">
      <div class="card__title">Card Title</div>
      <div class="card__description">Lorem ipsum doler amet...</div>
    </div>
  </div>
</div>
<div class="card a50">
  <div class="card__content">
    <div class="card__content-inner">
      <div class="card__title">Card Title</div>
      <div class="card__description">Lorem ipsum doler amet...</div>
    </div>
  </div>
</div>
<div class="card a100">
  <div class="card__content">
    <div class="card__content-inner">
      <div class="card__title">Card Title</div>
      <div class="card__description">Lorem ipsum doler amet...</div>
    </div>
  </div>
</div>
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #1f2229;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.card {
  position: relative;
  height: calc(100% - 30px);
  width: calc(33.333% - 30px);
  background: #fff;
  overflow: hidden;
  float: left;
  margin: 15px;
  &__content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: calc(100% - 80px);
    left: 0;
    opacity: 1;
    transition: all 0.75s ease-in-out;
    
    display: flex;
    align-items: top;
    justify-content: center;
    
    &-inner {
      position: relative;
      display: block;
      height: 80px;

      display: flex;
      flex-flow: column nowrap;
      text-align: center;
      justify-content: center;
      
      transition: all 0.75s ease-in-out;
    }
    &:after {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 30px;
      height: 30px;
      border-color: #fff;
      border-style: solid;
      border-width: 2px 0 0 2px;
      content: "";
    }
  }
  &__title {
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
  }
  &__description {
    color: #eee;
  }
  &:after {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: "";
  }
  &.a100,
  &:hover {
    cursor: pointer;
    .card__content {
      top: 0;
      background: #000;
      transition: all 1s ease-in-out;
      &-inner{
        height: 100%;
        align-items: center;
        justify-content: center;
        transition: all 1s ease-in-out;
      }
    }
  } // demo
  &.a50{
    .card__content {
       top: 50%;
      &-inner{
        height: 50%;}
    }
    &:hover {
      .card__content {
         top: 0;
        &-inner{
          height: 100%;}
      }      
    }
  }
  &.a100{
     &:hover {
      .card__content {
         top: calc(100% - 80px);
        &-inner{
          height: 80px;}
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.