<main>
  <!-- Row 1 -->
  <ul class="card-list">
    <li>
      <article>
        <h1>Caramel Apple Pork Chops</h1>
        <section>
          <img src="http://images.media-allrecipes.com/userphotos/560x315/971671.jpg" alt="Pork loin chops"/>
          <div class="content">
            <a class="view-recipe" href="#">View Recipe</a>
            <ul class="categories">
              <li>Dinner</li>
              <li>Meat</li>
              <li>American</li>
              <li>Southern</li>
            </ul>
            <p>Succulent pork loin chops are paired brilliantly with slices of tart apple cooked in a satin-smooth sauce of butter, brown sugar, cinnamon, and nutmeg. A few chopped pecans over the top make this a delectable autumn entree.</p>
            <p>Succulent pork loin chops are paired brilliantly with slices of tart apple cooked in a satin-smooth sauce of butter, brown sugar, cinnamon, and nutmeg. A few chopped pecans over the top make this a delectable autumn entree.</p>
          </div>
        </section>
      </article>
    </li>
    <li>
      <article>
        <h1>Polenta Bake with Shrimp</h1>
        <section>
          <img src="https://cdn-image.realsimple.com/sites/default/files/styles/portrait_435x518/public/1473198246/shrimp-polenta-bake.jpg?itok=9EKRPw1o" alt="Polenta Bake with Shrimp"/>
          <div class="content">
            <a class="view-recipe" href="#">View Recipe</a>
            <ul class="categories">
              <li>Dinner</li>
              <li>Seafood</li>
              <li>American</li>
              <li>Southern</li>
            </ul>
          <p>This Southern-inspired single skillet dinner is warming and hearty—like comfort food all grown up. It’s simple and quick enough for a weeknight, and the whole family will be grateful. Whole milk and Parmesan cheese give the polenta an extra dose of creaminess, and plenty of large tail-on shrimp get tossed in paprika and butter for layers of decadent flavor. For maximum charring with minimal hands-on work, the shrimp and cherry tomatoes are broiled before being added to the skillet. Before serving, the dish gets a smattering of fresh scallions for crunch and a bright green pop of color. Get your skillet (and forks) ready.</p>
          </div>
        </section>
      </article>
    </li>
    <li>
      <article>
        <h1>Polenta Bake with Shrimp with a Long Title</h1>
        <section>
          <img src="https://placehold.it/400x400" alt="Pork loin chops"/>
          <div class="content">
            <a class="view-recipe" href="#">View Recipe</a>
            <ul class="categories">
              <li>Dinner</li>
              <li>Seafood</li>
              <li>American</li>
              <li>Southern</li>
            </ul>
            <p>This Southern-inspired single skillet dinner is warming and hearty—like comfort food all grown up. It’s simple and quick enough for a weeknight, and the whole family will be grateful. Whole milk and Parmesan cheese give the polenta an extra dose of creaminess, and plenty of large tail-on shrimp get tossed in paprika and butter for layers of decadent flavor. For maximum charring with minimal hands-on work, the shrimp and cherry tomatoes are broiled before being added to the skillet. Before serving, the dish gets a smattering of fresh scallions for crunch and a bright green pop of color. Get your skillet (and forks) ready.</p>
          </div>
        </section>
      </article>
    </li>
  </ul>
</main>
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Raleway');

body {
  font: normal 14px 'Raleway', Helvetica, Arial, sans-serif;
  color: #333333;
}

main {
  margin: 0;
}

main::after {
  content: '';
  display: block;
  clear: both;
}

ul.card-list,
ul.card-list ul {
  padding: 0;
  margin: 0 auto;
  list-style-type: none;
}

ul.card-list {
  text-align: center;
}

ul.card-list a {
  color: inherit;
  text-decoration: none;
}

ul.card-list > li h1 {
  font: normal 24px 'Josefin Slab', serif;
  padding: .25em .5em;
  margin: 0;
  text-align: center;
}

ul.card-list li {
  display: inline-block;
}

ul.card-list > li {
  vertical-align: top;
  width: 400px;
  padding: 0;
  margin: .5em;
  text-align: left;
  border-radius: 5% 5% 0 0;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3);
}

ul.card-list section {
  height: 200px;
}

ul.card-list .content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0 1em;
  top: 0;
  text-align: initial;
  overflow-y: auto;
  color: #ffffff;
  background: rgba(0, 0, 0, .7);
  box-sizing: border-box;
  transform: translateY(-100%);
  transition: transform .5s ease;
}

ul.card-list > li:hover .content {
  position: absolute;
  padding: 0 1em;
  transform: translateY(0);
}

ul.card-list .content a.view-recipe {
  display: block;
  font-weight: 700;
  width: 80%;
  padding: 10px;
  margin: 1em auto;
  color: #ffffff;
  border: 2px solid #ffffff;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
  transition: all 200ms ease-out;
}

ul.card-list .content a.view-recipe:hover {
  color: #44dda0;
  background: #ffffff;
}

ul.card-list > li section {
  position: relative;
  overflow: hidden;
}

ul.card-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul.categories ul.categories > li {
  font-weight: 100;
  font-size: .8em;
  margin: .2em .1em;
  color: #dddddd;
}

ul.card-list .content p {
  line-height: 1.3em;
  padding: 0;
  margin: .7em 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.