<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: inline-flex;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background: orange;
transition: all .5s;
}
.container:hover > .item:not(:hover) {
height: 80px;
background: black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.