Stats preview card component

Hi! Great job completing the stats preview card component!

In answer to your question about the image and color, here’s some of suggestions:

• It looks like you’ve created a pseudo (::before) element for your .image-section container to give it a background color. I think this is where the little bit of overlap in the mobile version is coming from. You don’t need a pseudo element for this, you can remove the pseudo element and add the background color declaration directly to the .image-section.

• Nice job declaring global variables on the root for your colors! You’ve got a variable for the correct color (--accentColor), go ahead and use that variable for the background color instead of ‘purple’ so your styling matches up with the text span color 😃

• What we’re looking to do here is control the blending, or blend-mode, of the image and its background. CSS has a couple different properties to do this. In your code, you’ve got the image as a child of the .image-section, and you want to blend that image with the background-color of .image-section (its parent), so mix-blend-mode is the property you want to use.

For the value of the mix-blend-mode property, (the blend mode article has good descriptions of what each value means and looks like) the look we’re going for here comes from multiplying the top and bottom layers, and the end result is similar to a transparent film.

• You were right about applying an opacity, but apply it to your image element instead of .image-section.

• Make sure to apply both the mix-blend-mode and opacity properties to your image and not .image-section. (if you apply it to .image-section, you’ll get a dark blue as its trying to blend the .image-section div with its parent element instead). If you find the color’s still a little off, try increasing your opacity.

Hopefully that helps and happy coding!