Stats preview card component

👾Hello Jakub, congratulations for your solution!

-- >Answering your question about the color overlay effect:

I had the same question when I did this challenge, and to reach the color effect I found 3 ways to do that:

1.👾The most obvious way was try to match the purple color blending the background and the image playing with the img opacity, you can get close to the color but doesn't match due some contrast issues, opacity isn't enough. The way you've done.

.................

2.👾Using filter one online tool to calculate the filter for the purple color overlay on the image and using it to blend, this works but doesn't match the image. Anyway this tool for filter generation is good to apply hover effects changing svg colors without a need to transform them into path, take a look:

Filter code for the purple color:

filter: invert(48%) sepia(22%) saturate(2034%) hue-rotate(235deg) brightness(90%) contrast(89%);

--> See the filter calculator here: https://codepen.io/sosuke/pen/Pjoqqp

.................

3.👾The proper solution to do the effect overlay on the image, using mix-blend-modes. Just apply theses properties to the img / picture. Code below:

img {mix-blend-mode: multiply; opacity: 0.75; }

More about mix-blend-mode here:

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

.................

I hope it helps you to fix the image overlay bro, happy coding!