Submitted over 1 year ago

Stats preview card component

yas• 390

@yosrajalali

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm not sure about creating the image overlay..

I also had a hard time make it responsive,any comment is greatly appreciated🙏

Community feedback

Fer• 3,970

@fernandolapaz

Posted over 1 year ago

Hi 👋🏻, regarding your comment:

You could use the mix-blend-mode property that specifies how an element's content should blend with its direct parent background, like this:

.img__container {
background-color: var(--Soft-violet-accent);
}

.img__container img {
mix-blend-mode: multiply;
opacity: 0.75;
}

I hope it’s useful,

Let me know if it worked : )

Regards,

Marked as helpful

yas• 390

@yosrajalali

Posted over 1 year ago

Hi..yesss it worked thank you so much@fernandolapaz

hitmorecode• 6,230

@hitmorecode

Posted over 1 year ago

Congratulations well done, looks good. You can adjust the break point for mobile to 1110px. There is no problem with the overlay, you could also done it with a before pseudo element.

Marked as helpful

yas• 390

@yosrajalali

Posted over 1 year ago

thanks a lot for putting time on this . the overlay that I made is completely different from the design. I'm looking for a way to make it exactly the same @hitmorecode

hitmorecode• 6,230

@hitmorecode

Posted about 1 year ago

@yosrajalali the one in the challenge is done with mix-blend-mode: multiply if you want to learn more about this check this link

W3Schools - Mix-blend-mode

Please log in to post a comment

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