Submitted about 2 years ago

Stats preview card component

Himanshu Sahani• 30

@F-a-u-x-L

Preview site View code

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had trouble in adding the tint to the image, I googled for the way to implement it somehow, but I didn't understand it completely.

Why doesn't the color or background color work ?
Why is it implemented in this way (refer to the style sheet)

I would really appreciate if anyone can explain me this.

Also is there an alternate way to implement the tint over the image?

Community feedback

Vanza Setia• 27,835

@vanzasetia

Posted about 2 years ago

Hi, Himanshu! 👋

Regarding the image overlay, I recommend using mix-blend-mode and then reducing the opacity of the img. For your reference (and the final result) you can see @DarrickFauvel's solution.

Some feedback from me.

Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
I recommend adding a max-width to the main element to prevent the card from becoming too large on wide screen sizes.
For the image, I suggest using picture element so you can show the mobile version and desktop version based on the media query.

That's it! Hope you find this useful!

Himanshu Sahani• 30

@F-a-u-x-L

Posted about 2 years ago

@vanzasetia Thanks Vanza for your valuable feedback.

Yes, I just got to know that we can use background: url() and mix-blend mode to implement the image in the desired manner. I was not aware of that we can use CSS to attach the images rather that using image tag in HTML.

I will also keep in mind the other points that you have mentioned and implement it in the code and make mobile first layouts.

Thank you, your feedback was really helpful.

Vanza Setia• 27,835

@vanzasetia

Posted about 2 years ago

@F-a-u-x-L You're welcome!

If you are going to use background-image, then I suggest using background-blend-mode instead. 🙂

Darrick Fauvel• 340

@DarrickFauvel

Posted about 2 years ago

@vanzasetia Thanks for the mention, Vanza!😊

Vanza Setia• 27,835

@vanzasetia

Posted about 2 years ago

@DarrickFauvel No problem! I'm happy to promote your solution since mine it's not as good as yours. 😅

Paul THEUREAU• 120

@Paul21777

Posted about 2 years ago

Hi !

I have completed this challenge a few days ago and I had problems too implementing this purple color before the img. I think your solution is pretty clear ! I search on the web too and I could not figure out a best practice for this unfortunately.

Personnaly, I used the filter property in order to play with opacity and then I tried to find the right amount of saturation to get a good look since getting 100% the same color than the design was impossible for me.

Hope that helps and maybe someone here could give us the best pratice (if there is one...)

Keep the good work !

Himanshu Sahani• 30

@F-a-u-x-L

Posted about 2 years ago

@Paul21777 I just found an alternate way You can leave the div empty and not use the <img> element rather you can use the background: url() property in CSS to implement the image and color I haven't changed the code yet but I am planning to do it that way now Will let you know once I change it

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