Stats preview component, using vanilla css

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; }

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;
}