[![enter image description here](https://i.stack.imgur.com/EI3Dy.png)](https://i.stack.imgur.com/EI3Dy.png)[![enter image description here](https://i.stack.imgur.com/E9JeX.png)](https://i.stack.imgur.com/E9JeX.png)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

```css
.img-circle {
  border-radius: 50%;
}
```

```html
<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>
```