Mask overflow text overflow of a rounded image

I'm trying to mask any overflow of text links on top of a rounded image. I have a working plunker here

HTML:

<body>
  <div class="container">
    <img class="profile-picture" src="https://image.freepik.com/free-icon/male-user-profile-picture_318-37825.jpg">
    <a class="profile-picture-link">Mask the overflow of this text</a>
  </div>
</body>

CSS:

.profile-picture{
    height: 250px;
    width:250px;
    border-radius:50%;
    margin:auto;    
}

.container{
    background:pink;
    margin: auto;
    width:50%;
    text-align:center;
}

.profile-picture-link{
    background: rgba(255,255,255, .6);
    position:relative;
    top:-30px;
}

How can I mask the text that overflows the rounded borders of the image?

Solution

Use clip-path:

.profile-picture {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  margin: auto;
}

.container {
  background: pink;
  margin: auto;
  width: 50%;
  text-align: center;
  -webkit-clip-path: circle(43% at 44% 46%);
clip-path: circle(43% at 44% 46%);
}

.profile-picture-link {
  background: rgba(255, 255, 255, .6);
  position: relative;
  top: -30px;
}

<div class="container">
  <img class="profile-picture" src="https://image.freepik.com/free-icon/male-user-profile-picture_318-37825.jpg">
  <a class="profile-picture-link">Mask the overflow of this text</a>
</div>