Stats preview card component solution using CSS

Hi there! 👋

I would recommend putting the image as an actual img element on the HTML because the img would have height by default. So, you don't need to specify a height. Also, you can use picture element to change the image from one version to another.

Also, I suggest making the img as block element and setting max-width: 100% to make it easier to work with img element.

Then, to create the overlay I suggest using mix-blend-mode and adjusting the opacity of the img to make it looks similar (or even the exact same) to the design.

For your reference, you can see @DarrickFauvel's solution for this challenge. He had done an amazing job on making the overall (and the site overall).

One suggestion - I recommend making the stats as a list. If the site has no styling (which is like a document) then it would be a list. This way, the statistic has semantic HTML markup. 😉`

• 10k+ companies
• 314 templates
• 12m+ queries

Lastly, don't forget to fix all the issues that have been generated.

That's it! I hope this helps. 🙂

Hey King!

For the image, you can use a pseudo element to achieve the same result like ::after or ::before

• just add some CSS to the .header-img ;

.header-img{
 ............................
 position: relative;
 isolation: isolate;
}

• Then you should be able to style the pseudo element to look like;

.header-img::before{
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  background-color: .....;
}

Not sure if it's a better way to you though but I hope you found it helpful 🙂