Add a Mask in CSS

PHOTO EMBED

Saved by @mishka #css

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
} 
content_copyCOPY

Masking tells your browser which asset elements should be visible, and is very useful for building creative shapes and layouts. Masking can be done in three ways: using a raster image (eg PNG format with transparency parts), CSS gradients or SVG elements.

https://www.creativebloq.com/features/css-tricks-to-revolutionise-your-layouts