<div class="container">
  <div class="row cards">
    <div class="col-md-4">
      <div class="card">
        <div class="image">
          <img src="https://www.androidfreeware.net/img2/saint-seiya-awakening-knights-of-the-zodiac.jpg" alt="">
        </div>
        <h2 class="title">Enrique Contreras</h2>
        <div class="entry">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti numquam atque facilis perspiciatis iure explicabo officiis soluta harum reprehenderit cumque nulla porro beatae iste velit dolores odit, fugiat accusamus voluptate!
        </div>
        <div class="ball"></div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="image">
          <img src="https://is3-ssl.mzstatic.com/image/thumb/Purple124/v4/fa/f0/f3/faf0f352-4361-78bc-89c4-a2d1e797878c/source/256x256bb.jpg" alt="">
        </div>
        <h2 class="title">
          Alberto Romero
        </h2>
        <div class="entry">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias natus vitae veritatis, saepe, laboriosam vero perspiciatis placeat quas tenetur provident exercitationem? Error, cupiditate possimus. Necessitatibus, nam explicabo? Qui, facere inventore.
        </div>
        <div class="ball"></div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="image">
          <img src="https://a.thumbs.redditmedia.com/GhC7_U5QlJKAgoa1LdSd4dNB0_fto180kEAR9-Rby_4.png" alt="">
        </div>
        <h2 class="title">Alberto Enrique</h2>
        <div class="entry">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias id beatae commodi culpa, recusandae voluptas inventore quasi. Eligendi aut, sapiente ipsum at natus necessitatibus, voluptate ratione, eius earum ut praesentium.
        </div>
        <div class="ball"></div>
      </div>
    </div>
  </div>
</div>

$green : #49A660;
$red:#BF0426;

.container{
  margin: 2rem auto; 
}
.cards{
  .card{
    min-height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:$red;
    padding:2rem 0;
    transition:.2s;
    &:before{
      content: '';
      right:-2px;
      left:-2px;
      top:-2px;
      bottom:-2px;
      background:linear-gradient(315deg, #89D995, #D96704);
      position:absolute;
      transform: skew(2deg, 2deg);
      z-index:-1;
      transition:.2s;
    }
    &:after{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:50%;
      height:100%;
      background: rgba(255,255,255,.1);
      transform:skew(2deg);
      transition:.2s;
    }
    .title{
      text-align:center;
      padding:.4rem;
      color: #D9D9D9;
      font-weight:bold;
      border-bottom:4px solid #400808;
    }
    
    .image{
      border-radius:100%;
      overflow:hidden;
      border:2px solid white;
      width:50%;
      box-shadow:3px 3px 10px #F21905;
      transform:skew(3deg);
      transition:.2s;
    }
    
    .entry{
      padding:1rem;
      text-align:justify;
      color: #D9D9D9;
    }
    
    &:hover{
      .image{
        transform:skew(-3deg) translateY(-20px);
        width:70%;
        box-shadow:0 0 20px white;
      }
      &:before{
        content: '';
        right:-2px;
        left:-2px;
        top:-2px;
        bottom:-2px;
        background:linear-gradient(315deg, #F21905, #49A660);
        position:absolute;
        transform: skew(-2deg, -2deg);
        z-index:-1;
      }
      &:after{
        background: rgba(255,255,255,.2);
        transform:skew(-1deg, -2deg) scale(1.1);
      }
    }
  }
}