Enabling change picture button when current picture is hovered - html

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.

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>

Answer 2

You shouldn't be wrapping html content inside an <img> tag, it's not syntatically correct.
Place all your content after the image tag, and trigger the css on hover using + selector. Use opacity instead of visibility as well for smoother transitions.
HTML:
<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>
</div>
CSS:
#upload_pic_icon {
opacity: 0;
}
#personal_profile_pic:hover + #upload_pic_icon {
opacity: 1;
}

Answer 3

Try changing opacity from a very small value which the img could be considered invisible to fully visible (1.0). But your logic is likely wrong as there is no sense to hover something previously invisible.
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
opacity: 0.000001;
}
#personal_profile_pic:hover #upload_pic_icon{
opacity: 1;
}

Answer 4

Very Simple Here is the Solution
https://jsfiddle.net/dineshkanivu/uddv4y9z/
HTML
<div class="MyImage">
<div class="penLayer">
<img src="https://cdn2.iconfinder.com/data/icons/snipicons/500/pencil-128.png"/>
</div>
</div>
CSS
.MyImage{
background: url("http://gretchenrubin.com/wp-content/uploads/2013/09/big_small_.jpg");
width: 350px;
height: 263px;
position:relative
}
.penLayer{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:none;
}
.penLayer img{width:60px;
height:60px;
position:absolute;
left:50%;
top:50%;
margin-top:-30px;
margin-left:-30px}