CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Ramin Daqiq
Ramin Daqiq

Reputation: 37

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

enter image description hereenter image description hereI 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>

Upvotes: 3

Views: 8342

Answers (2)

Mihai T
Mihai T

Reputation: 17697

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>

Upvotes: 3

Ivin Raj
Ivin Raj

Reputation: 3429

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

Upvotes: -1

Related Questions