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

Stats preview card

Neil Kanakiaโ€ข 300

@neilk17

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


One thing I wasn't able to figure out was the violet overlay on top of the image

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

Hello again Neil, congratulations for your new solution!

Answering your question:

To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

Hereโ€™s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

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

See if works for you =)

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