<head>
  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
  <!-- Code by Angela Delise  
 https://codepen.io/angeladelise/pen/JjXJqgO
-->
</head>

<body>
  <div class="card">
    <div class="card__body">
      <img src="https://images.unsplash.com/photo-1536304929831-ee1ca9d44906?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="card__image">
      <h2 class="card__title">The Everyday Salad</h2>
      <p class="card__description">Take your boring salads up a knotch. This recipe is perfect for lunch and only contains 5 ingredients!</p>
    </div>
    <button class="card__btn">View Recipe</button>
  </div>

  <div class="card">
    <div class="card__body">
      <img src="https://images.unsplash.com/photo-1476124369491-e7addf5db371?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="card__image">
      <h2 class="card__title">Simple Risotto</h2>
      <p class="card__description">Fear Risotto no more! This simple recipe is perfect for family dinners.</p>
    </div>
    <button class="card__btn">View Recipe</button>
  </div>

  <div class="card">
    <div class="card__body">
      <img src="https://images.unsplash.com/photo-1529928520614-7c76e2d99740?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="card__image">
      <h2 class="card__title">Baked Cod with Vegetables</h2>
      <p class="card__description">Baked Cod with Vegetables. 30 minute meal!</p>
    </div>
    <button class="card__btn">View Recipe</button>
  </div>
</body>
:root {
  /*   color variables */
  --clr-primary: #d50000;
  --clr-primary-hover: #29e6a7;
  --clr-primary-dark: #039d69;
  --clr-gray100: #f0f7f8;
  --clr-gray200: #cfd8dc;
  --clr-gray300: #a7b7be;
  --clr-gray400: #6b7e86;
  --clr-gray500: #425a65;

  /*   border radius */
  --radius: 0.2rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Oxygen, sans-serif;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
  grid-gap: 2rem;
  justify-content: center;
}

.card {
  overflow: hidden;
  box-shadow: 0px 2px 20px var(--clr-gray200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 200ms ease-in;

  &__image {
    height: 12rem;
    width: 100%;
    object-fit: cover;
  }

  &__title {
    padding: 1rem;
  }

  &__description {
    padding: 0 1rem;
  }

  &__btn {
    padding: 1rem;
    font-family: inherit;
    font-weight: bold;
    font-size: 1rem;
    margin: 1rem;
    border: 2px solid var(--clr-primary);
    background: transparent;
    color: var(--clr-primary);
    border-radius: var(--radius);
    transition: background 200ms ease-in, color 200ms ease-in;
  }

  &:hover {
    transform: scale(1.02);
  }

  &:hover &__btn {
    background: var(--clr-primary);
    color: white;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.