Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component

Ruthwik 190

@web-devie

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, thanks for passing by :)

  1. Just can't figure how to add the dark purple filter upon the image. Just let me know if you know any way to mimic the same as the original one

Any kind of feedback is highly appreciable. Have a glance at my code and suggest what I could have done better to achieve a better version than this. Thanks!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Ruthwik, congratulations for your solution.

Answering your question:

There's three ways to reach the overlay effect in the image.

1.You can play around opacity and the div background(purple), you'll have a close result but not the same as the reference.

2.Using filters over the image to force the color change, this gives you a better result, but doesn't match it 100%.

3.The easiest: Using mix-blend-mode + opacity, all you need to do is add to the img the following properties mix-blend-mode:multiply; and an value around opacity: 0.7; et voilà, here's the image overlay.

Hope it helps you Ruthwik, say me if works, happy coding!

Marked as helpful

1

Ruthwik 190

@web-devie

Posted

@correlucas Yayy!! That worked Lucas, Thanks a ton :)

1
Lucas 👾 104,420

@correlucas

Posted

@web-devie you're welcome Ruthwik, happy to hear that works.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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