<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.