stats-preview-card-component-main using flexbox and grid
Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello again Moeka, congratulations for your new solution!
Here's some tips for you:
To have your image purple with the same overlay effect, you need to use
mix-blend-mode
to make this color blend between the image and the background-color of the container. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Is better to use relative units as
rem
orem
instead ofpx
to improve your performance resizing fonts between different screens and devices.βοΈ I hope this helps you and happy coding!
Marked as helpful0@moe-kaPosted about 2 years agoThank you Mr. @correlucas π it's helpful. I hope you to give me more tips for solutions then π
0
Please log in to post a comment
Log in with GitHubJoin 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