JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="wrapper-item">
    <i class="fa fa-heart-o" aria-hidden="true"></i>
    <h4>Your Title</h4>
    <p>Duis bibendum diam
      <br> non erat facilaisis en ter tincidunt. Duis </p>
    <div class="wrapper-hov">
      <h4>See More</h4>
      <i class="fa fa-search-plus" aria-hidden="true"></i>
      <i class="fa fa-link" aria-hidden="true"></i>
    </div>
  </div>

SCSS

.wrapper {
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: relative;
  &-item {
    width: 190px;
    border: 2px solid #ebebeb;
    &:hover {
      .wrapper-hov {
        display: block;
        transition: opacity .2s linear;
        opacity: 1;
      }
    }
    .fa {
      padding: 31px 67px 36px;
      color: #503392;
      font-size: 60px;
    }
    h4 {
      font-weight: bold;
      font-size: 14px;
      text-transform: uppercase;
      padding-bottom: 14px;
    }
  }
  &-hov {
    display: block;
    background-color: #503392;
    position: absolute;
    width: 190px;
    top: 121px;
    color: #fff;
    transition: opacity .2s linear;
    opacity: 0;
    h4 {
      padding: 24px 0 0 0;
    }
    .fa {
      color: #fff;
      font-size: 20px;
      padding: 32px 7px 39px 21px;
    }
  }
}