I am trying to mask an image using CSS and the WebKit property ( -webkit-mask-image ) . But due to some reason, the mask doesn't work when I use it from local files on my PC or even when I upload it to a website of mine and use the link. If I use the mask image directly from the tutorial website I followed the mask works fine. In the below code you can see I have commented out a webkit-mask-image and if you run the code as it is you would see nothing whereas if you uncomment it and comment out the second webkit-mask-image it would start working. Same thing happens if I use the file path of my PC instead of the tutorial URL. Please help me out with this. seems really weird.
<!DOCTYPE html>
<html>
<head>
<style >
html, body {
height: 100%;
}
img.two {
height: 50%;
width: auto;
}
.mask4 {
/*-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");*/
-webkit-mask-image: url("https://3dmetalart.com/wp-content/uploads/2020/05/image-mask.png");
-webkit-mask-size: 400px 600px;
}
</style>
</head>
<body>
<h1>Image mask using png </h1>
<img class="two mask4"src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg"><br>
</body>
</html>
