Как сделать подобный hover эффект

.equaliser { 
	transform: rotate(180deg); 
} 
 
.bar { 
	float: left; 
	width: 7px; 
	height: 10px; 
	background: red; 
	position: absolute; 
	bottom: 0; 
} 
 
.first { 
	left: 7px; 
	-webkit-animation: firstBar 1s infinite; 
} 
 
.second { 
	left: 19px; 
	-webkit-animation: secondBar 1s infinite; 
} 
 
.third { 
	left: 31px; 
	-webkit-animation: thirdBar 1s infinite; 
} 
 
.fourth { 
	left: 43px; 
	-webkit-animation: firstBar 1s infinite; 
} 
 
.fifth { 
	left: 55px; 
	-webkit-animation: secondBar 1s infinite; 
} 
 
.sixth { 
	left: 67px; 
	-webkit-animation: thirdBar 1s infinite; 
} 
 
@-webkit-keyframes firstBar { 
	0% { 
		height: 10px; 
	} 
	50% { 
		height: 30px; 
	} 
	100% { 
		height: 10px; 
	} 
} 
 
@-webkit-keyframes secondBar { 
	0% { 
		height: 30px; 
	} 
	50% { 
		height: 10px; 
	} 
	100% { 
		height: 30px; 
	} 
} 
 
@-webkit-keyframes thirdBar { 
	0% { 
		height: 20px; 
	} 
	40% { 
		height: 10px; 
	} 
	60% { 
		height: 30px; 
	} 
	100% { 
		height: 20px; 
	} 
}

<div class="equaliser"> 
    <div class="bar first"> 
    </div> 
    <div class="bar second"> 
    </div> 
    <div class="bar third"> 
    </div> 
    <div class="bar fourth"> 
    </div> 
    <div class="bar fifth"> 
    </div> 
    <div class="bar sixth"> 
    </div> 
</div>

document.querySelectorAll('.item').forEach(item => { 
  var t = '<div style="display:block;transform:rotate(180deg)">'; 
  for (var i=0; i<6; i++) 
    t+= `<div class="band" style="left:${i*5}px;--h:${(5+i%3*5)}px"></div>` 
  item.innerHTML += t+'</div>'; 
});

.item { 
  display: inline-block; 
  height: 20px; 
  float: left; 
  margin-left: 20px; 
  cursor:pointer; 
} 
 
.band { 
  display: inline-block; 
  background-color: black; 
  width: 5px; 
  height: 0px; 
  display: inline-block; 
  transition: 0.2s; 
  position: relative; 
  margin-left: -2px; 
  bottom: 0; 
} 
 
.item:hover .band { 
  height: var(--h); 
}

<div class="item">Home</div> 
<div class="item">About</div> 
<div class="item">Goods</div>