Stats preview card component

Community feedback

• 

  Micpic3•0

  @Micpic3Posted over 2 years ago

  In regards to the violet overlay:

  1. The color is the same as the "accent" color defined in the style guide.

  2. There is a css property called mix-blend-mode. Mozilla has a section about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode. In particular, the multiply option is most likely the one used for the challenge. The concept of blend modes is not unique to css. This is a resource I found helpful in understanding how some of them (including multiply) actually work: https://photoblogstop.com/photoshop/photoshop-blend-modes-explained.

  So with respect to your code, you'll need your filter-img div over the img (which is already happening). Then, use mix-blend-mode: multiply in the filter-img div to multiply it with the image:

  .filter-img {
    mix-blend-mode: multiply;
    background-color: hsl(277, 64%, 61%);
  }
  

  0

  ---

  

  Juan Cruz Ardanaz•230

  @juanardanazPosted over 2 years ago

  Hi @Micpic3, thank you very much for your comment and the information!

  I will try that method!

  0