JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="list">
  <div class="user">
    <img src="http://simpleicon.com/wp-content/uploads/user1.png">
    <div class="info">петров</div>
  </div>
  <div class="user online">
    <img src="http://megaicons.net/static/img/icons_sizes/16/624/256/user-green-icon.png">
    <div class="info">иванов</div>
  </div>
  <div class="user online">
    <img src="http://megaicons.net/static/img/icons_sizes/16/624/256/user-green-icon.png">
    <div class="info">сидоров</div>
  </div>
</div>

CSS

.user {
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.user img {
  width: 50px;
  height: 50px;
}
.info {
  color:#FFF;
  background: rgba(0,0,0,0.6);
  height:50px;
}
.user:hover .info {
  margin-top:-50px;
}

JavaScript

setInterval(function(){  
  $('#list').prepend($('#list .online'));
},5000);