Card stats with BEM and Flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Hello Orses, congratulations for your new solution!

  I saw that you've applied mix-blend-mode: multiply to make the overlay effect with the image, in this case you miss only the opacity: 75% to reach the same color, note that you image is a bit strong. The color the container should have for a perfect blend should be the same color of the insight in the headline h1.

  Hope it helps, happy coding?!

  Marked as helpful

  1

  ---

  

  Orses•210

  @orsesPosted about 2 years ago

  Thank you very much @correlucas for your words and for your help. In what you comment on the image I used the color of the text insight and set aside the opacity in this way:

  .card__media::after {
     background-color: var(--color-accent); /* hsl(277, 64%, 61%) */
     mix-blend-mode: multiply;
     opacity: 0.75;
  ....
  }
  

  I don't know how to do the correction you suggest. I also tried directly using hsla(277, 64%, 61%, 0.75) and got the same result. I'll look at others' solutions to see if I'm able to fix it. Thank you very much! Cheers

  0