Stats preview card component fully responsive with flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  iMAGE BLEND 📸:

  • We can quickly resolve it by adding mix-blend-mode property to the image and add the violet color as the background for the image container

  ---

  • Example:

  .rightPanel  {
  background: hsl(276.9, 63.8%, 61%);
  }
  
  .rightPanel img {
  mix-blend-mode: multiply;
  opacity: .75;
  }
  

  ---

  • After these steps you can remove the entire .filter element and it's styles to make the code more cleaner and reusable!

  ---

  • Now you got the desired result where the image is perfectly blended with the background violet, and the result will accurately match the design image

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  10
• 

  Don•220

  @coffeeslammer

  Posted about 2 years ago

  to mix the color to the image you use

  picture{
  background-color: color of choice;
  }
  picture img{
  mix-blend-mode: multiply
  opacity: 0 - 1;
  }
  

  and the background color to a wrapper like <picture> or <div> depending on situation

  00