CodePen Embed - Card Overlay

<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=1" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=2" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=3" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=4" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=5" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=6" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=7" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=8" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=9" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=10" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=11" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=12" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=13" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=14" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=15" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=16" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=17" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=18" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=19" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=20" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=21" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=22" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=23" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=24" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>
<article class="card">
  <div class="card__thumb">
    <img src="https://picsum.photos/500?random=25" alt="">
  </div>
  <div class="card__content">
    <h2><a href="#">Cinnamon Rolls</a></h2>
    <p>Light, tender, and easy to make</p>
  </div>
  <span class="card__tag">Must Try</span>
</article>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 20px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Layout */
.card {
  position: relative;
  display: grid;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.3);
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
}
.card__thumb {
  object-fit: cover;
  max-width: 100%;
  aspect-ratio: 4/3;
  width: 100%;
  border-radius: 5px;
  z-index: -3;
}

.card > * {
  grid-area: 1 / -1;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0));
  z-index: -1;
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(to top, #000000d9, #0000) bottom/100% 60%
    no-repeat;
}
.card__content h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.card__tag {
  background-color: #367df1;
  align-self: start;
  justify-self: start;
  min-width: 100px;
  padding: 8px;
  margin-top: 1rem;
  color: #fff;
  border-radius: 0 10rem 10rem 0;
}

This Pen is owned by 大漠 on CodePen.

See more by @airen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.