Stats Preview Card Component Using Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Omer, congrats for your new solution!

  Here’s some tips to improve your component design:

  1.You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 1110px.

  2.I saw that you've tried to create the overlay effect using a div with position: absolute and the color/position properties. But there's an easier and quick way to apply the purple overlay color all you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1