Stats preview card component using grid and flex

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 11 months ago

  Hello @mhykah-webdev

  Great work on completing the challenge!

  You can simplify the process of implementing the image tint. I would remove all the positioning (relative, absolute) and even remove ::before related to the tint logic.

  You can consider using the mix-blend-mode CSS property. It blends between stacked HTML elements, so elements on overlapping layers will blend with those beneath it.

  So, in your code, apply the purple color to your parent element i.e. picture element and then apply mix-blend-mode: multiply on the child element i.e img element which has the source of the image.

  Therefore, going by the definition, the picture element with the purple color is blending with the child element which has the image.

  Hope this helps! Let me know if it works!

  Marked as helpful

  1

  ---

  

  P

  mhykah•220

  @mhykah-webdevPosted 11 months ago

  @rupali317 Thanks for your help! I didn't know about mix-blend mode. I've updated the project since and it looks a lot more closer with less confusing code!

  1

  

  P

  Rupali•780

  @rupali317Posted 11 months ago

  @mhykah-webdev Glad to hear that! :D

  1