<div class="container max-width-xxxs padding-y-lg">
  <article class="card">
    <a href="#0" class="card__link">
      <figure>
        <img class="block width-100%" src="https://images.unsplash.com/photo-1531591022136-eb8b0da1e6d0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
      </figure>
      
      <div class="text-component padding-md">
        <h1 class="text-lg"><span class="card__title">Title of the card</span></h1>
        <p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, totam?</p>
      </div>
      
      <div class="card__icon-wrapper" aria-hidden="true">
        <svg class="icon icon--sm color-white" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><line data-color="color-2" fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12" stroke-linecap="butt"></line><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline></g></svg>
      </div>
    </a>
  </article>
</div>
.card {
  background-color: var(--color-bg);
  transition: box-shadow .3s;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  
  &:hover {
    box-shadow: var(--shadow-md);
    
    .card__title {
      background-size: 100% 100%;
    }
    
    .card__icon-wrapper .icon {
      animation: card-icon-animation .3s;
    }
  }
}

.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card__title {
  background-image: linear-gradient(transparent 50%, alpha(var(--color-primary), 0.2) 50%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background .3s;
}

.card__icon-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 3em;
  height: 3em;
  background-color: alpha(var(--color-black), 0.85);
  border-bottom-left-radius: var(--radius-lg);
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes card-icon-animation {
  0%, 100% {
    opacity: 1;
    transform: translateX(0%);
  }
  
  50% {
    opacity: 0;
    transform: translateX(100%);
  }
  
  51% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework@2.7.0/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/Wqvpmm

External JavaScript

  1. https://unpkg.com/codyhouse-framework@2.1.13/main/assets/js/util.js