CSS CARDs

CSS CARDs

HTML

<h2>Card</h2>

<div class="card">
  <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%; clip-path: polygon(0 0, 100% 0, 100% 42%, 0 23%);">
  <div class="container">
    <h3>John Doe</h3>
    <p>Architect & Engineer</p>
  </div>
</div>

CSS

.card {
  border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  width: 50%;
}

.card h3 {
  padding: 2px;
  margin: 8px 0;
/*   line-height: 20px !important;
  font-size: 18px !important;
  font-weight: 500 !important; */
}

.card:hover {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card .container {
  padding: 2px 14px;
}

.card p {
  margin: 14px 0;
}

JavaScript

// FOR LINK OVER CARD: https://jsfiddle.net/onigetoc/nop0o574/