title: Overlay text on hover
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
    }
    &amp;:hover .edit {
      display: block;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="profile-userpic"&gt;
     &lt;a href=""&gt;&lt;img src=" http://placehold.it/150x150" class="img-responsive" alt="" title=""&gt;&lt;/a&gt;
     &lt;div class="edit"&gt; &lt;a href=""&gt;Edit&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>