Naveen Kumar Naveen Kumar - 4 years ago 161
CSS Question

On hover changing visibility in Css

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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download