<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.