<div class="padding-y-lg container max-width-adaptive-lg">
  <div class="grid gap-md">
    <article class="card radius-lg col-6@sm col-4@md">
      <a href="#0" class="block color-inherit text-decoration-none">
        <figure class="media-wrapper">
          <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.</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>
    
    <article class="card radius-lg col-6@sm col-4@md">
      <a href="#0" class="block color-inherit text-decoration-none">
        <figure class="media-wrapper">
          <img class="block width-100%" src="https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?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.</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>
    
    <article class="card radius-lg col-6@sm col-4@md">
      <a href="#0" class="block color-inherit text-decoration-none">
        <figure class="media-wrapper">
          <img class="block width-100%" src="https://images.unsplash.com/photo-1583132899463-28ba57170fdc?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.</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>
</div>
/* 🕹ī¸ Demo - Building scalable CSS architectures */
/* 🐞 CodyHouse.co */
.card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  transition: box-shadow .3s;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card:hover .card__title {
  background-size: 100% 100%;
}

.card:hover .card__icon-wrapper .icon {
  animation: card-icon-animation .3s;
}

.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://codepen.io/codyhouse/pen/oNxLjqp
  2. https://unpkg.com/codyhouse-framework/main/assets/css/style.css

External JavaScript

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