Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 973
Marc Meister Avatar asked Dec 14 '22 09:12

Marc Meister


1 Answers

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>
like image 196
louie kim Avatar answered Dec 28 '22 08:12

louie kim