CODEWITHSUNDEEP
jquerycss
Hisham Aburass
Hisham Aburass

Reputation: 625

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

How can I make like this image which has a label within it.

thanks.

enter image description here

I have tried this css for making the image rounded, but I am not able to make a label 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" />

Upvotes: 5

Views: 400

Answers (2)

pennyroyal
pennyroyal

Reputation: 250

You can create wrapper that will contain image and label, like 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>

Or create a round wrapper and use image as background, like here: 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>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use one element with img inside and add :after pseudo element, or you can use image as background

.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>

Upvotes: 6

Related Questions