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
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


How did you solve adding color filter over image? I used CSS filter but it did not work so well.

Community feedback

@ahhmedsafwat

Posted

there are very different ways to do it, I do it with adding overlay using after or before as you love and added some opacity to the color until it is like the design and this is the color (i have used #501674 and this is the opacity I used too 0.72 ) I am sorry if make some mistakes in the lang don't forget the z-index to make the overlay over the photo

Marked as helpful

1

@Ullvang

Posted

@ahhmedsafwat thanks for comment, do you have a link to code with example of how you do it?

1

@ahhmedsafwat

Posted

@Ullvang with CSS and HTML yah i have I will upload it to the GitHub and i will send you the repo

Marked as helpful

1

@ahhmedsafwat

Posted

@Ullvang https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62/hub/my-first-solutions-in-this-great-website-clmqmUOCu this is the link to my solution

Marked as helpful

0

@ahhmedsafwat

Posted

@Ullvang its not 100% but still as close as the solution

Marked as helpful

0

@ahhmedsafwat

Posted

@Ullvang you are welcome i hop i help you as well i can

Marked as helpful

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