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


Tags: jquery,css,css3

Problem :

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" />


Solution :

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>


    CSS Howto..

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    Taking var with JS prompt - how can I make it through HTML form?

    How can I get width and height of big image after displaying it on html-page?

    Icon with overhead label - how to get both to respond to hover, with CSS?

    How to render checked checkboxes using CSS alone?

    I have a blinking box, how can I add a gradient to this or program it easier?

    How do I correct this CSS fluid layout glitch?

    How can I add custom search box on page?

    How do i prevent my CSS affecting external plugins?

    • centered, not moving down.. unsure why / how to fix

    How can I control my

    styling in another styling?

    how to to set chat box based on user id using css

    How to use CSS with javascript

    How to target element inside iframe from css or javascript for styling

    Show bottom of an overflow string in a div with fixed height/width?

    How To Add % Based Image To CSS? (for fluid layout)

    Homepage build - How to use CSS more efficiency?

    How do I make menu background even with the header in HTML/CSS

    How to avoid form-control in all inputs with Twitter Bootstrap 3?

    How to go about making an image move up in the div on hover

    How to make a floating box in the center of the screen with responsive layout?

    How to local storage expand/collapse CSS settings

    How to hide :before in overflow:hidden element

    How to position elements with flex [duplicate]

    How to add a class to an element with CSS

    How to make more divs appear when hovering over one div?

    How to properly use CSS in GWTP?

    How to add footer to the bottom of the page

    How to keep a div's height 100%?

    How to fix layout to browser window without scroll