JSFiddle - React, Tailwind, and code Playground

HTML

<div class="friend">
  <img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
  <span class="name">Ania</span>
</div>
<div class="friend">
  <img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
  <span class="name">Ania</span>
</div>
<div class="friend">
  <img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
  <span class="name">Ania</span>
</div>
<div class="friend">
  <img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
  <span class="name">Ania</span>
</div>

CSS

.friend {
  position: relative;
  width: 100px;
  padding-top: 5%;
	padding-bottom: 5%;
}

.friend:hover {
	margin-top: -1%;
	padding-top: 6%;
	height: calc(100% + 1px);
  background-color: red;
}

.friend:not(:first-of-type){
  border-top: 2px #000 solid;
}
.friend:hover + .friend, .friend:hover{
  border-top-color: transparent;
}