<div id="container">
<div id="mask"></div>
<img id="picture" src="https://farm4.staticflickr.com/3888/14992963317_99f62cb8c5_b.jpg">
</div>
#container {
position: relative;
width: 320px;
height: 568px;
background-color: #333;
margin: auto;
}
#picture {
width: 100%;
-webkit-mask-type: alpha;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 640'><rect fill='#000' width='100%' height='100%' fill-opacity='0.3'/><path d='M229.5,221.2c16.8,0,31.1,6.1,43.1,18.3s18,26.7,18,43.4c0,17.5-6.3,32.2-18.8,44l-84.5,85.7l-6.3,6.3l-6.3-6.3l-86.3-87.4 c-11.4-12.2-17.1-26.3-17.1-42.3c0-16.8,6-31.2,18-43.4c12-12.2,26.4-18.3,43.1-18.3c20.2,0,36.3,8,48.5,24 C193.1,229.2,209.4,221.2,229.5,221.2z'/></svg>");
/*-webkit-mask-size: 100% 100%;*/
-webkit-mask-position: center;
-webkit-mask-repeat:no-repeat;
-webkit-mask-size: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.