Submitted almost 5 years ago

Stats Card Component

LVL 2

@SJ-Nosrat

A solution to the Stats preview card component challenge

Solution retrospective

In the mobile design I've wrapped my images in a <figure> tag and applied a background-color to the tag. The reason is the use of the "mix-blend-mode: multiply" in CSS to the <img> tag to obtain the overlay effect, since the <img> tag will use the parent's container background-color to achieve this effect.

However, you'll notice that the <figure> height is much taller than the actual image, and I get the horizontal pink/purple line.

How to I overcome this?

Thanks in advance!

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Shahin NJ’s solution.

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