title: Enabling change picture button when current picture is hovered
body: <p>I have a image when hovered should show a small pencil icon to change upload new image. I am new to css, I have set the visibility of the icon to <code>hidden</code> by default. But when i change the visibility on hover to <code>visible</code>. It doesn;t show up.</p>
  
  <pre><code>&lt;div class="col-lg-3"&gt;
       &lt;img id = "personal_profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"&gt;
    &lt;a href="#"&gt;
      &lt;span id="upload_pic_icon"&gt;
            &lt;label for="avatar" id="avatar_label"&gt;
                 &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;/label&gt;                        
      &lt;/span&gt;
    &lt;/a&gt;
         &lt;form id="change_pic_form"&gt;
              &lt;input type="file" name="avatar" id="avatar"&gt;                                
         &lt;/form&gt;
  
    &lt;/img&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css</p>
  
  <pre><code>#upload_pic_icon{
      margin-left: 62%;
      margin-top: -25%;
      display: block;
      position: absolute;
      visibility: hidden;
  }
  
  #personal_profile_pic:hover #upload_pic_icon{
      visibility: visible;
  }
  </code></pre>
  
  <p>I don't understand how to go about this.</p>