I am not getting the masking image from the below code. Please help me out to get the solution.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masking Practise</title>
<style type="text/css">
.bcenter{
border: none;
text-align: center;
}
img{
width: 200px;
height: 100px;
}
#masked{
width: 200px;
height: 100px;
-webkit-mask-box-image:url(images/cake2.jpg)
}
#linear-masked{
width: 200px;
height: 100px;
/* -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from (rgba(0,0,0,0)), to(rgba(0,0,0,0.9))); */
-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from (rgba(0,0,0,0)), to(rgba(0,0,0,0.9)));
}
</style>
<section class="bcenter">
<h1>Examples of Masking</h1>
<h2>Masking image by an image</h2>
<h3>Original image</h3>
<img src="images/cake.jpg">
<img src="images/cake2.jpg">
<h3>Using Masking effect</h3>
<img src="images/cake.jpg" id="masked">
<h2>Masking image by Linear gradient</h2>
<img src="images/cake.jpg" id="linear-masked">
</section>