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

Basic HTML/CSS Excercise

@dknyd

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


Hi Guys,

Another of my earliest projects, but here I would have an actual important question:

In the example picture, the image on the right has some kind of purple filter on it which I have no idea how to recreate, if you have any suggestion, please let me know. :)

Trezmor

Community feedback

Lucas 👾 104,540

@correlucas

Posted

👾Hello @trezmor, congratulations on your solution!

Answering your question:

To reach theoverlay effect on the *card image as the Figma Design its better you use mix-blend-mode.

All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

img {
mix-blend-mode: multiply;
opacity:  83%;
}

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!

Marked as helpful

0

@GalinaM-G

Posted

Hello @trezmor,

I would use pseudo-element ::before and add a background-color with needed transparency.

Gool luck!

0

@TjasaZil

Posted

Hi Trezmor. I say that you wrapped your image in a div. try adding a purple background color to the div around the image. This should put a purple color above the picture. You will probably have to adjust the opacity of the background.

I hope that helps :)

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