Masks in Design and How They Relate to HTML/CSS

I have always struggled understanding the use of masks in design tools like Photoshop, Illustrator, and Sketch. I recently had to work on translating some creative from Sketch into a responsive design. I realized that a mask in these tools is like a containing element in HTML with overflow hidden and the contents being absolutely positioned.

This is not something you would want to do a lot of as there is a lot of the image being loaded that not being shown. But, it is useful in responsive designs.

See the Pen How masks in design tools translate to HTML by Brian Moon (@brianlmoon) on CodePen.