Desktop preview card component solution using HTML and CSS

The difficulties I faced while doing this project was making the image look like what was on the mockup. I did use the background-color for the overlay and then used opacity to reduced the opacity of the overlay so that the image behind is visible but I changed my mind and used filter instead. Is there a better way to do this? Please let me know.

Thanks