How can I make a rounded image with a label in it?

Question

How can I do like this image in which there is a label.

thank.

I tried this css in order to make the image rounded, but I cannot make a shortcut like this provided image.

.img-circle {
    border-radius: 50%;
    width: 25%;
    height: 25%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

<img src=".." class="img-circle" />

Answer 1

You can use one element with imginside and add an alias :after, or you can use the image asbackground

.el {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border: 2px solid red;
}
.el:after {
  content: '1';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: red;
  text-align: center;
  line-height: 30px;
  color: white;
}

<div class="el">
  <img src="http://placehold.it/100x100">
</div>

Run codeHide result

Answer 2

You can create a shell that will contain an image and a label, for example here: https://jsfiddle.net/9e7h2LLf/

.wrapper{
  border-radius: 50%;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: absolute;
}

img {
  height: 100px;
  width: 100px;
}

.label {
  background-color: red;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  color: white;
  text-align: center;
}

<div class="wrapper">
  <img src="https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg">
  <span class="label">1</span>
</div>

, : https://jsfiddle.net/3jmfcudo/

.wrapper{
  border-radius: 50%;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url("https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg");
  background-size: contain;
  position: absolute;
}

.label {
  background-color: red;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  color: white;
  text-align: center;
}

<div class="wrapper">
<span class="label">1</span>
</div>