What is CSS Masking?

Basic Concept

In this example, the black div is masking the image div with a circular cutout.

.mask-div {
    mask-image: url('circle.svg');
    -webkit-mask-image: url('circle.svg');
}

Gradient Mask

.gradient-mask {
    -webkit-mask-image: linear-gradient(to right, transparent, black);
    mask-image: linear-gradient(to right, transparent, black);
}

Shape Mask

.shape-mask {
    -webkit-mask-image: url('diamond.svg');
    mask-image: url('diamond.svg');
}

Interactive Mask

.interactive-mask {
    -webkit-mask-size: 50% 50%;
    mask-size: 50% 50%;
    transition: all 0.5s ease;
}

.interactive-mask:hover {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}