<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap" rel="stylesheet">

<div style="--img: url(https://images.unsplash.com/photo-1675780568028-9b4ca140e5b4?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)">
  <div class="card">
    <div class="thumb"></div>
    <div class="content">
      <h2>Far far away</h2>
      <p>Far far away, behind the word mountains, far from...</p>
    </div>
  </div>
</div>

<div style="--img: url(https://images.unsplash.com/photo-1676907820177-6784c3a05bf7?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)">
  <div class="card">
    <div class="thumb"></div>
    <div class="content">
      <h2>Separated they live</h2>
      <p>Separated they live in Bookmarksgrove right at...</p>
    </div>
  </div>
</div>

<div style="--img: url(https://images.unsplash.com/photo-1688723210283-f45ed1e6bcb8?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)">
  <div class="card">
    <div class="thumb"></div>
    <div class="content">
      <h2>A small river named Duden</h2>
      <p>A small river named Duden flows by their place and...</p>
    </div>
  </div>
</div>

<div style="--img: url(https://images.unsplash.com/photo-1683573254548-ebb7b94d7def?q=80&w=5106&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)">
  <div class="card">
    <div class="thumb"></div>
    <div class="content">
      <h2>A small river named Duden</h2>
      <p>A small river named Duden flows by their place and...</p>
    </div>
  </div>
</div>
* {
 margin: 0;
   padding: 0;
}
body {
  font-family: "Quicksand", sans-serif;
  color: #000;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  gap: 20px;
  padding: 20px;
}

.card {
  border-radius: 20px;
/*   box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 16px rgba(0,0,0,0.3); */
  width: 270px;
  aspect-ratio: 1 / 1.5;
  overflow: hidden;
  position: relative;
}

div:has(.card) {
  position: relative;
}

div:has(.card):before {
  content: "";
  border-radius: 20px;
  position: absolute;
  inset: 0;
  top: 10px;
  background: var(--img);
  background-size: cover;
  filter: blur(16px) brightness(1.1);
}

.card .thumb {
  object-fit: cover;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  position: absolute;
  left: -30px;
  top: -30px;
}

.thumb:before {
  content: "";
  background: var(--img);
  background-size: cover;
  position: absolute;
  inset: 0;
}
.thumb:after {
  content: "";
  background: var(--img);
  background-size: cover;
  position: absolute;
  inset: 0;
  
  filter: blur(10px) saturate(1.1) brightness(1.1);
   -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 65%);
   mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  
}


.card .content {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0px;
}

h2 {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -1px;
  text-wrap: balance;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.