Submitted over 3 years ago

Simple card component

SlothyPete• 20

@slothPete7773

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

How do I make mask color on the image? Also, in desktop view, when I add more padding, it takes up space in the left image, how should I solve that?

Community feedback

Patrícia Silva• 105

@patriciarrs

Posted over 3 years ago

Hello there, I'm not sure if this is the best option but I used the CSS filter property to change the image color (https://developer.mozilla.org/en-US/docs/Web/CSS/filter). When I open the page it only shows the mobile design.

SlothyPete• 20

@slothPete7773

Posted over 3 years ago

@patriciarrsilva Hi! Thanks for the suggestion, I'll try that in my next try for sure. For when you open mine and it only shows a mobile view, it may because your screen width is less than my breakpoint, it's 1440px. You may press F12 and set the width to 1440px or larger.

Giovani• 90

@giovanibulian

Posted over 3 years ago

Hey, SlothyPete. About the mask color on the image, I've used the ::before pseudo element of the div element containing the image to work that out. I'm not sure if my code is written in the best way possible, but you can check it out here.

A little caveat: the parent element (i.e. the div containing the image) must have position: relative for that to work out.

I've learned how to use it from Kevin Powell's YouTube Channel. There is a 3-video mini-series about that. Here is the first video.

SlothyPete• 20

@slothPete7773

Posted over 3 years ago

@giovanibulian Hello there, thanks a lot for the ideas, from your suggestion and your work :D

I'll make sure to check that video out when I have some time, thanks!

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