Skip to content
Submitted about 3 years ago

Stats Preview Card

Daniel Jansen van Vuuren•120
@DanielJvV
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

I had a really hard time getting the purple color over the image. I ended up using CSS filter to do it. I just think the ways I saw online where you create a div, give it a background color and an opacity, then you edit the z-index just to get an image to appear purple, is a lot of work. Any advice or tips would be appreciated. Thank you in advance.

Community feedback

  • dewslyse•3,025
    @dewslysePosted about 3 years ago

    You could also use one of the blend-mode properties in css to achieve same

    Marked as helpful
    2
  • MD Zillur Rahman•40
    @zillur-rgbPosted about 3 years ago

    I would give a background color of purple and using the background blend mode of multiply maybe I would be able to make this image.

    Marked as helpful
    1
  • Nick•760
    @Nick331102Posted about 3 years ago

    This is the easiest way I have found for the overlay.....

    try using an inset box shadow

    box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596);

    you can adjust the color

    Marked as helpful
    0
  • Officionale•180
    @officionalePosted about 3 years ago

    You could use the background-blend-mode property to get the purplish effect

    Marked as helpful
    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