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 strech select?

    How can I format outer table but not inner table

    How to align image within nested div<> with spaces in div names

    How to align the bottom of two left- and right aligned texts with bottom of parent container?

    How to create a simple Modal Dialog Box in JQuery?

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    How to make arrows on both sides of a box using css [duplicate]

    How to display parent form when input text is on focus?

    Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers

    How to Change Text Color with CSS Transitions?

    How to make this layout more responsive in CSS?

    How can I get CSS codes in a style element? [duplicate]

    How to set margin left and right to the center div when using float:left

    jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?

    How to generate regular CSS file from SASS?

    how to vertically align the 2 different font sizes inside a single

    how I can change the size of font inside PHP

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    how to stack elements using CSS

    How to have a centered layout with border (background-image), and footer sticked to the bottom?

    how can I do this space between tables? [closed]

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    How to make the width of a div in the middle responsive

    How do I keep a fixed header on top if there's a small strip on top of it?

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    CSS: How to center texts with transitioning position?

    How can i overlay an 10x10px image on top of another image?

    How to change navbar background color after page has scrolled down