Hover Card using ClipPath

by Aashish Manandhar

HTML

<div class="card">
  <div class="card-body"></div>
  <div class="card-footer">
    <div class="footer-text">
      Description
    </div>
  </div>
</div>

SCSS

body {
  background: #EEE;
  margin: 0;
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
}

.card {
  box-shadow: 1px 1px 2px #cecece;
  position: relative;
  background: #2196F3;
  height: 200px;
  width: 200px;
  border-radius: 6px;
  text-align: center;
  color: white;
  z-index: 0;
  overflow: hidden;

  .card-footer {
    position: absolute;
    width: inherit;
    height: inherit;
    background: white;
    font-family: sans-serif;
    font-size: 28px;
    color: #828282;

    align-items: center;
    -webkit-clip-path: inset(100% 0% 0%);
    transition: all 0.5s ease-in-out;

    .footer-text {
      padding-top: 140px;
    }
  }

  &:hover {
    .card-footer {
      opacity: 1;
      -webkit-clip-path: inset(60% 0% 0%);
    }
  }
}