How to create MSN-like news cards? - html

Question

The MSN has news cards recommendation on its website. The image overlay color and the bottom color of the card sink in well, the text is displayed over it. The cards has various colors and looks good. How to create similar effect with HTML and CSS? The below code is similar but it doesn't look as good as MSN.
HTML
<ul class="card-wrapper">
<li class="card">
<img src='https://images.unsplash.com/photo-1611916656173-875e4277bea6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<h3>The image above needs to have transparent overlay on the top</h3>
<p>But has to mingle smoothly with bottom white/black/#cee4e4 color card footer.</p>
</li>
<li class="card">
<img src='https://images.unsplash.com/photo-1611083360739-bdad6e0eb1fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<h3>The text can be get into the bottom of the image</h3>
<p>where the color gets faded away to show clear image.</p>
</li>
<li class="card">
<img src='https://images.unsplash.com/photo-1613230485186-2e7e0fca1253?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<h3>The card just needs to look like the MSN news cards</h3>
<p>Just like in the example image - https://i.imgur.com/sU6Kofb.png.</p>
</li>
</ul>
SCSS
.card {
--card-gradient: rgba(0, 0, 0, 0);
--card-gradient: #1c00ff00, #cee4e4;
// --card-gradient: tomato, orange;
--card-blend-mode: overlay;
// --card-blend-mode: multiply;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
padding-bottom: 1rem;
background-image: linear-gradient(
var(--card-gradient),
white max(9.5rem, 27vh)
);
overflow: hidden;
img {
border-radius: 0.5rem 0.5rem 0 0;
width: 100%;
object-fit: cover;
// height: max(10rem, 25vh);
max-height: max(10rem, 30vh);
aspect-ratio: 4/3;
mix-blend-mode: var(--card-blend-mode);
// filter: grayscale(100);
~ * {
margin-left: 1rem;
margin-right: 1rem;
}
}
> :last-child {
margin-bottom: 0;
}
&:hover,
&:focus-within {
--card-gradient: #dbdbdb max(8.5rem, 10vh);
}
}
/* Additional demo display styles */
* {
box-sizing: border-box;
}
body {
display: grid;
place-content: center;
justify-items: center;
min-height: 100vh;
margin: 0;
padding: 1rem;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
color: #444;
background-color: #e1faf1;
}
.card h3 {
margin-top: 1rem;
font-size: 1.25rem;
}
.card a {
color: inherit;
}
.card-wrapper {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
grid-gap: 1.5rem;
max-width: 100vw;
width: 120ch;
padding-left: 1rem;
padding-right: 1rem;
}
View on Codepen
The above code gives similar effect but it doesn't look as good as MSN news cards. The above card doesn't display a clear transparent image and doesn't look as good as MSN news cards.
Live example at MSN

Answer 1

Here is a snippet, using position, you need to wrap div around h3 and p
.card-wrapper {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px
}
.card {
position: relative
}
.card div {
/* Note: this variables are from msn dark mode - change to the values you prefer */
--gradient-mid-color: rgba(46, 46, 46, .8);
--gradient-color: #2e2e2e;
--radial-gradient-color: rgba(46, 46, 46, 0);
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
background: linear-gradient(180deg, transparent 0%, var(--gradient-mid-color) 62.5%, var(--gradient-color) 100%);
color: #fff;
width: 100%;
box-sizing: border-box;
}
.card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.card a {
color: inherit;
text-decoration: none
}
<ul class="card-wrapper">
<li class="card">
<img src='https://images.unsplash.com/photo-1611916656173-875e4277bea6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<div>
<h3>The image above needs to have transparent overlay on the top</h3>
<p>But has to mingle smoothly with bottom white/black/#cee4e4 color card footer.</p>
</div>
</li>
<li class="card">
<img src='https://images.unsplash.com/photo-1611083360739-bdad6e0eb1fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<div>
<h3>The text can be get into the bottom of the image</h3>
<p>where the color gets faded away to show clear image.</p>
</div>
</li>
<li class="card">
<img src='https://images.unsplash.com/photo-1613230485186-2e7e0fca1253?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<div>
<h3>The card just needs to look like the MSN news cards</h3>
<p>Just like in the example image - https://i.imgur.com/sU6Kofb.png.</p>
</div>
</li>
</ul>