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 Solution

@IshitaBisaria

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 to overlay the color on the image?

Community feedback

P

@webdev1kev

Posted

There are a lot of different ways to approach the color overlay. If you don't want to mess with all those filter properties you could give the #right-div a background-color and change the opacity of the image to like 0.5. From there you can just mess with the background color until it matches close to the color of the design.

Hope this helps and keep up the good work!

Marked as helpful

0

@IshitaBisaria

Posted

@kdavis010397 Thank you so much :)

0

@Gauravkumario

Posted

You can use background blend mode property: multiply to overlay the color over image and don't forget to add alt attribute in img element. you can use flex or grid to make it mobile view friendly. btw web view is nice .

Marked as helpful

0

@IshitaBisaria

Posted

@Gauravkumario Thank you so much :)

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