CSS Masking

CSS Masking is a technique used to hide or reveal a portion of an element using an image or an SVG element. This technique is particularly useful when working with images or videos, where you want to show only a specific part of the element.

The CSS masking properties are:

• mask-image: sets the image or SVG to be used as the mask for an element.
• mask-mode: specifies the blending mode between the element and the mask.
• mask-repeat: controls how the mask image is repeated or tiled if it is smaller than the element.
• mask-position: sets the position of the mask image.
• mask-clip: defines the area that the mask image should be clipped to.
• mask-origin: specifies the position of the mask image relative to the element's padding box.

Examples

Use an Image as the Mask Layer

Here's an example of how to use CSS masking to show only a portion of an image:

<img src="image.jpg" alt="Image" class="mask">

.mask {
 width: 300px;
 height: 200px;
 mask-image: url(mask.png);
 -webkit-mask-image: url('mask.png'); /* For Safari */
 mask-mode: luminance;
 mask-repeat: no-repeat;
 mask-position: center center;
}

In this example, the mask-image property is used to set the mask to an image called mask.png. The mask-mode property is set to luminance, which means that only the luminance values of the mask image are used to create the mask. The mask-repeat property is set to no-repeat to prevent the mask from being repeated or tiled if it is smaller than the element. The mask-position property is set to center center to center the mask image within the element.

Masking using Gradients as the Mask Layer

Here is an example of how to use the mask property with a gradient:

.mask {
 mask-image: linear-gradient(to bottom, black, transparent);
 -webkit-mask-image: linear-gradient(to bottom, black, transparent); /* For Safari */
}

In this example, the mask-image property is set to a linear gradient that goes from black to transparent. The -webkit-mask-image property is also included for Safari compatibility.