Slide Reveal Card

<div class="reveal-card">
  <div class="rc-top">
    <div style="font-size:28px">&#9672;</div>
    <div style="font-weight:700;font-size:15px;margin-top:8px">Analytics</div>
  </div>
  <div class="rc-bottom">
    <div style="font-size:12px;color:#999;line-height:1.5">Track performance metrics and user engagement in real-time.</div>
  </div>
</div>

.reveal-card {
  width: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.rc-top {
  padding: 28px 20px 20px;
  text-align: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.rc-bottom {
  padding: 0 20px 20px;
  max-height: 0;
  opacity: 0;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.reveal-card:hover .rc-top {
  transform: translateY(-6px);
}
.reveal-card:hover .rc-bottom {
  max-height: 80px;
  opacity: 1;
}