<div class="user">
  <div class="user-icons">
    <img src="//htmlbook.ru/example/images/user-x.svg" class="user-icon user-icon-x" alt="">
    <img src="//htmlbook.ru/example/images/user-add.svg" class="user-icon user-icon-add" alt="">
    <img src="//htmlbook.ru/example/images/user-minus.svg" class="user-icon user-icon-minus" alt="">
  </div>
  <img src="//htmlbook.ru/example/images/user-girl.svg" class="user-img" alt="">
</div>

.user {
  --W: 300px;
  --s_user: 100px;
  --s_icon: 60px;
  width: var(--W); height: var(--W);
  border: 1px solid turquoise;
  border-radius: 50%;
  position: relative;
  margin: 2em;
}
.user-img {
  position: absolute;
  width: var(--s_user); height: var(--s_user);
  left: calc(50% - var(--s_user) / 2);
  top: calc(50% - var(--s_user) / 2);
}
.user-icon {
  position: absolute; 
  width: var(--s_icon); height: var(--s_icon);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  padding: 0.5em;
  box-sizing: border-box;
  background-color: #e8edbc;
  opacity: 0;
  transition: 1s;
}
.user-icon:hover {
  background-color: tan; 
}
.user-icon-x     { --angle: 0deg    }
.user-icon-add   { --angle: 120deg  }
.user-icon-minus {  --angle: 240deg }
.user:hover .user-icon {
  left: calc(50% + 50% * sin(var(--angle)));
  top: calc(50% - 50% * cos(var(--angle)));
  opacity: 1;
}