Submitted about 2 years ago

Stats preview card component using HTML and CSS only

accessibility

Mikhail•440

@MikeBeloborodov

A solution to the Stats preview card component challenge

Preview Code

Solution retrospective

I am not sure about my approach to make the provided image having a purpleish tint. I used a div with a purple background with the picture on top and then lowered the opacity of the picture. Is this the best practice?

Code

Please log in to post a comment

Community feedback

vintech05•370
@vintech05
Posted almost 2 years ago
Greetings Mikhail,

I, too, faced the same problem during the making of the purple tint. but I found one solution that makes it less stressful. Let me give you a heads-up.

using the mix-blend-mode property in CSS would greatly help you in finding its exact saturation and colors. also if you want to be more precise, you can use the filter property instead!
```
img {mix-blend-mode: overlay;}
```
filter

filter converter

mix and blend

I hope this helps!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord