<div class="container mt-3">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="://0" class="card-img-top text-center" alt="Mountain Scene" onerror="this.classList.add('noImage')">
<div class="card-body">
<h5 class="card-title">A post w/ no image.</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
<div class="card-body">
<h5 class="card-title">A post with image.</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
<div class="card-body">
<h5 class="card-title">A post with image.</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
<div class="card-body">
<h5 class="card-title">A post with image.</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
.card img.noImage,
.card img.noImage:after{
position:relative;
aspect-ratio: 16 / 9;
font-size: 2rem;
text-shadow:1px 1px rgba(0,0,0,0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-image: repeating-conic-gradient(
from 0 at 100% 100%,
rgba(255, 255, 255, 0.7) 0% 2deg,
transparent 0 9deg
),
radial-gradient(
circle 150px at 100% 100%,
white,
yellow,
lightyellow,
rgba(46, 181, 229, 0.8)
);
background-color: #2eb5e5;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
.card img.noImage:after{
content:attr(alt);
position:absolute;
z-index:99;
left:0;
right:0;
top:0;
bottom:0;
}
View Compiled