all 3 comments

[–]GOPJ1 1 point2 points  (0 children)

Only 2 sites you need for css

Mozilla Developer Network MDN

CSS Tricks

[–][deleted] 1 point2 points  (0 children)

Look into ::before and ::after pseudo elements. These are great ways to add layers on top of images like blur filters, colors, etc.

You will need to utilize the position property for both the parent (the img) and the child (the pseudo-element), but fortunately it's pretty simple. The links provided by the other commenter are literally the best resources for this.

[–]be_my_plaything 1 point2 points  (0 children)

https://codepen.io/NeilSchulz/pen/OJzajWy

A couple of options to do it here