Skip to content
Submitted over 3 years ago

Frontend Mentor - Stats preview card component solution

David Shanahan•20
@dave-shanahan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Within the What I learned section, I highlighted the method I used to add the color overlay to the image; however, it doesn't appear to match the solution.

Does anyone know of a better way to achieve it?

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 3 years ago

    Hi, David! Congrats on submitting your first solution! 🎉

    The image coloring is tricky, and uses a property you may not have heard of before - mix-blend-mode. If you set mix-blend-mode: multiply on your '#card-image' and adjust the opacity a bit, the color should be perfect!

    0
    David Shanahan•20
    @dave-shanahanPosted over 3 years ago

    Thanks for the tip Brasspetals!

    I've submitted a second solution with this fix now :)

    0

Please log in to post a comment

Log in with GitHub

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