Stats preview component, using vanilla css

Solution retrospective
Could not create the blue filter on the image. Looking for someone to help with the logic
Please log in to post a comment
Log in with GitHubCommunity feedback
- @jengori
I also struggled with the color filter on the image when I completed this challenge. In the end, I used the CSS property mix-blend-mode on the image, and set the background color of the div that the image is contained in to the color that I wanted for the filter. So something like:
.image-div { background-color: hsl(277, 64%, 61%); }
.image { mix-blend-mode: multiply; }
Marked as helpful - @Nebil-Nej
It bothered me as well. but it was actually simple when i found out, just use this: -use the img tag in the html. -then use that section's background-color and opacity to make it transparent.
section { background-color: random-color; opacity: '<1' ; //for the transparency }
or you can use the same section, and then add the image inside it.
section { background-image: url(image url); background-color: random-color; opacity: '<1' ; //for the transparency }
oww and you did not center the part that needs to be centered, you can do that by using Flexbox centering
body { width: height: display: flex; justify-content: center; align-items: center; }
Marked as helpful
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