Skip to content
Submitted almost 2 years ago

flexbox

georgefrg•100
@georgefrg
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

cant find a way to make the image violet

Code

Please log in to post a comment

Log in

Community feedback

  • Kemystra•200
    @Kemystra

    Hey, congratz for solving the problem!

    I just wanted to share how I made the image violet. But firstly, I used the picture tag instead of just the normal img tag. It helps to switch between images depending on a CSS media query (e.g: switch between mobile and desktop specific images based on width).

    picture tag is pretty much a special div, and you put an img tag inside. What I did was I set the picture background to violet. You can then use the CSS property mix-blend-mode. Basically it will blend the image with the background color. There are a lot of values that you can use with mix-blend-mode, so try to experiment to see which one will achieve the closest result.

    Marked as helpful

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