Is there any plugin that has this + modal effect to change photo? Or is everything done in CSS :
Follow a basic template as I said. With CSS it is quite easy to do not need a plugin or library ...
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0;
}
.box {
display: flex;
width: 100px;
height: 100px;
position: relative;
}
.avatar::after {
opacity: 0;
font-family: FontAwesome;
content: "\f040";
color: #fff;
font-size: 2.5rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 4px;
left: 4px;
width: 92px;
height: 92px;
z-index: 2;
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
cursor: pointer;
transition: 350ms ease-in-out;
}
.avatar:hover::after {
opacity: 1;
}
.avatar {
box-sizing: border-box;
border: 4px solid silver;
border-radius: 50%;
overflow: hidden;
}
.menu {
position: absolute;
opacity: 0;
width: 100px;
height: auto;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
box-sizing: border-box;
padding: 0.5rem;
border-radius: 0.5rem;
top: 60%;
left: 60%;
z-index: -1;
transition: 350ms ease-in-out;
}
.box input {
display: none;
}
.box input:checked + div.menu {
opacity: 1;
z-index: 999;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box">
<label class="avatar" for="btn">
<img src="http://placecage.com/100/100"alt="">
</label>
<input type="checkbox" id="btn">
<div class="menu">
<a href="#"><i class="fa fa-upload"> <span>upload</span></i></a>
<br>
<a href="#"><i class="fa fa-edit"> <span>edite</span></i></a>
</div>
</div>