round clickable profile image with a button on the bottom in css - html

Question

I want to make a round clickable profile image which will a have button on the bottom . i can do that for a normal image but when it comes to rounded image, the button is taking the size of the container in which this image and button are available .
thanks
.img-circle {
border-radius: 50%;
}
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; bottom: 20px; left: 40px;">UPLOAD</span>
</div>
</div>

Answer 1

ok. see here. i think i understood what you wanted to achieve .
let me know if it helps
NOTE : the img.img-circle {background:black; } is just for example purpose so you can see where the img should be. in your code you don't have to include this
.img-circle {
border-radius: 50%;
}
img.img-circle {
background:black;
}
span {
left:0;
text-align:center;
width:100%;
background:rgba(255,255,255,0.5);
bottom:0;
padding:20px 0;
}
.img-thumbnail {
border-radius: 0;
display:inline-block;
background:#dbdbdb;
padding:20px;
}
.img-thumbnail > div {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
-webkit-box-shadow: 0 2px 0 2px #333;
box-shadow: 0 2px 0 2px #333;
border-radius:50%;
}
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; ">UPLOAD</span>
</div>
</div>
<div class="img-thumbnail img-circle">
<div style=" position: relative;padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; ">UPLOAD</span>
</div>
</div>

Answer 2

you can try this one:
.img-circle {
border-radius: 50%;
}
.img-circle {
background:green;
}
span {
text-align:center;
width:100%;
background:white;
bottom:0;
padding:20px 0;
opacity:.5
}
.img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}
Here Updated Fiddle