How to create MSN-like news cards?

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


  
    
    The image above needs to have transparent overlay on the top
    But has to mingle smoothly with bottom white/black/#cee4e4 color card footer.
  
  
    
    The text can be get into the bottom of the image
    where the color gets faded away to show clear image.
  
  
    
    The card just needs to look like the MSN news cards
    Just like in the example image - https://i.imgur.com/sU6Kofb.png.

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

dippas · Accepted Answer

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
}


  
    
    
      The image above needs to have transparent overlay on the top
      But has to mingle smoothly with bottom white/black/#cee4e4 color card footer.
    
  
  
    
    
      The text can be get into the bottom of the image
      where the color gets faded away to show clear image.
    
  
  
    
    
      The card just needs to look like the MSN news cards
      Just like in the example image - https://i.imgur.com/sU6Kofb.png.

How to create MSN-like news cards?

Answers (1)

Related Questions