Responsive Stats Preview Card with Flexbox

Hi! Great Work Out there , I just wanna share on how can i achieve the color overlay of the image using the CSS properties mix-blend-mode:multiply or background-blend-mode:multiply , in your case I prefer to use the mix-blend-mode:multiply since you are not using the image as a background , and if you add this CSS properties you can remove all the properties .hero::after , (the bold text is the code i modify in your source code) i hope this suggestion works and helps. happy coding

img {

width: 100%;

height: auto;

mix-blend-mode: multiply;

vertical-align: middle;

**opacity: 0.8;you can adjust this **

}

.hero {

position: relative;

background-color: blueviolet;you can change this

display: inline-block;

}