Stats Preview Card Component

👾Hello @CodeWithSubaru, congratulations for your new solution!

Your component is great, you can improve it by replacing the main div with a semantic tag, this case you can use <main> or <article>. To make the container and the image responsive you need to max-width: 100% in place of widthto allow the container to contract, also use object-fit: cover to make the image crop while scaling with the container.

You need to use mix-blend-mode to make this color blend between the image and the background-color of the column blending image and color. See the steps below to apply to the img or picture selector:

img {
mix-blend-mode: multiply;
opacity: 75%;}

👋 I hope this helps you and happy coding!

Great solution. If you don't mind, there is an improvement that can be made.

To let the image with the overlay effect, you can use the mix-blend-mode property of css with the multiply value and add the filter property or some other that arrives at a similar result.

Another thing, your solution is not adapted to the screen of smaller devices such as smartphones.