/    /  CSS masking

CSS masking

 

This property is used to hide an element using the clipping/masking of the image at specific points. Masking provides how to use an image or the graphical element as a luminance/alpha mask. It is a graphical operation that can fully/partially hide the portions of an element or object.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
div img{
width: 200px;
height: 200px;
}
#masked{
width: 300px;
height: 300px;
-webkit-mask-box-image: url(box.png) 25;

}
</style>
</head>

<body>
<center>
<div id = "one">
<h2> Original Images </h2>
<img src = "forest.jpg">
<img src = "box.png">
</div>
<h2> After masking </h2>
<img src = "forest.jpg" id = "masked">
</center>
</body>
</html>

 

OUTPUT:

 

CSS masking