Enabling change picture button when current picture is hovered

Question

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

hidden

by default. But when i change the visibility on hover to

visible

. It doesn;t show up.

<div class="col-lg-3">

     <img id = "personal_profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">

  <a href="#">

    <span id="upload_pic_icon">

          <label for="avatar" id="avatar_label">

               <i class="fa fa-pencil" aria-hidden="true"></i>

          </label>                        

    </span>

  </a>

       <form id="change_pic_form">

            <input type="file" name="avatar" id="avatar">                                

       </form>



  </img>

</div>

Here is my css

#upload_pic_icon{

    margin-left: 62%;

    margin-top: -25%;

    display: block;

    position: absolute;

    visibility: hidden;

}



#personal_profile_pic:hover #upload_pic_icon{

    visibility: visible;

}

I don't understand how to go about this.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You need to use + selector , it will select #upload_pic_icon that are placed immediately after #personal_profile_pic

#upload_pic_icon{
  margin-left: 62%;
  margin-top: -25%;
  display: block;
  position: absolute;
  visibility: hidden;
}
#personal_profile_pic:hover + #upload_pic_icon {
  visibility: visible;
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
  <img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
  <a href="#" id="upload_pic_icon">
    <span>
          <label for="avatar" id="avatar_label">
               <i class="fa fa-pencil" aria-hidden="true"></i>
          </label>                        
    </span>
  </a>
  <form id="change_pic_form">
    <input type="file" name="avatar" id="avatar">
  </form>
</div>

Or you can wrap img and edit in div and the set hover on .wrap, and use display:none instead.

.wrap {
  position: relative;
  display: inline-block;
}
.wrap #upload_pic_icon {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
}
.wrap:hover #upload_pic_icon {
  display: block;
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
  <div class=wrap>
    <img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
    <a href="#" id="upload_pic_icon">
      <label class="fa fa-pencil" for="avatar" id="avatar_label">
      </label>
    </a>
  </div>
  <form id="change_pic_form">
    <input type="file" name="avatar" id="avatar">
  </form>
</div>

Enabling change picture button when current picture is hovered

Sign up