Stats preview card component using HTML and CSS

You can make use of the picture element inside the html file and you can remove it from the css file.

<picture>
  <source media="(min-width: ***px)" srcset="images/image-header-desktop.jpg">
  <source media="(min-width: ***px)" srcset="images/image-header-mobile.jpg">
  <img src="images/image-header-desktop.jpg" alt="">
</picture>

Replace *** with the width which you want a certain image to show.

You used filter to create the overlay. You need to fix it and use mix-blend-mode: multiply; and opacity: 0.8;

If this is not clear to you, let me know

Hey buddy......hope you doing great, here's what I would suggest you to do

• give a ids of mobile and desktop to your images........ now apply the below styles

#mobile{
     display: hide;
}
#desktop{
     display: block;
      some other styles to position the image/height and width etc....
}

• now you can use media queries to assist you for achieving your image switching on reducing the width.......

@media screen and (max-width: mobile-width/any width you want in px){
         #mobile{
                         display: block;
                         other styles that at you want
           }
         #desktop{
                       display: none;
          }

That will do the work.....hope this helped you, glad to help you buddy!! Keep learning and coding!!!