Search code examples
htmlcssstatusbadge

CSS: Add on image a badge to see the online / offline status

How can I add to an existing image an badge to see the online / offline status? Please see here an example. In the right corner there is a gray dot... How can I do this?

enter image description here

Many thanks

Solution

  • Put the icon inside a div that will hold the icon and the status element, like this

    .icon-container {
  width: 50px;
  height: 50px;
  position: relative;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: grey;
  border: 2px solid white;
  bottom: 0;
  right: 0;
  position: absolute;
}
    <div class='icon-container'>
  <img src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png" />
  <div class='status-circle'>
  </div>
</div>