Skip to content
Submitted over 2 years ago

Stats Preview Card Component

Ruthwik•190
@web-devie
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

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,400
    @correlucasPosted over 2 years ago

    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-deviePosted over 2 years ago

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

    1
    Lucas 👾•104,400
    @correlucasPosted over 2 years ago

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

    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