Overlay text on hover

Question

What I want: When the circular image is hovered, a grey overlay should cover the image with a hyperlinked text "Edit" on center of it.

.edit {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.6);
    a {
      display: inline-block;
    }
}

.profile-userpic {
  position: relative;
  display: block;
  a img {
    float: none;
    margin: 0 auto;
    width: 100%;
    width: 150px;
    height: 100%;
    height: 150px;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
  }
  &:hover .edit {
    display: block;
  }
}

<div class="profile-userpic">
   <a href=""><img src=" http://placehold.it/150x150" class="img-responsive" alt="" title=""></a>
   <div class="edit"> <a href="">Edit</a></div>
</div>

Answer 1

Your code is working (once it's compiled of course).

Edit: if you want your .profile-userpic to be independant and be able to place it anywhere you want (like in your screenshot), you have to change your code a bit. Instead of setting the height and with on the children elements (the img and your edit div), set it on the parent container.

.edit {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    line-height: 150px;
    text-align: center;
    background: rgba(0,0,0,0.6);
}
.edit a {
  color: white;
}

.profile-userpic {
  position: relative;
  height: 150px;
  width: 150px;
  margin: 20px auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.profile-userpic a img {
  width: 100%;
  height: 100%;
}
.profile-userpic:hover .edit {
  display: block;
}

<div class="profile-userpic">
   <a href=""><img src=" http://placehold.it/150x150" class="img-responsive" alt="" title=""></a>
   <div class="edit"> <a href="">Edit</a></div>
</div>

In bonus, here's a fiddle with a nice fadeIn/fadeOut effect in css : https://jsfiddle.net/u999xc85/1/