<p>Hover on any box</p>

​

<div class="container">

  <div class="box">

    <div class="item"></div>

  </div>

  <div class="box">

    <div class="item"></div>

  </div>

  <div class="box">

    <div class="item"></div>

  </div>

  <div class="box">

    <div class="item"></div>

  </div>

  <div class="box">

    <div class="item"></div>

  </div>

  <div class="box">

    <div class="item"></div>

  </div>

</div>

​

<div class='link'>

  <p align='center'>

    <a href="https://youtu.be/AERByfmKMok">

      Video demo

    </a>

  </p>

</div>

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  padding-top: 50px;

}

​

.container {

  padding: 20px;

  border: 1px solid black;

  width: max-content;

  display: flex;

}

​

.box {

  --size: 60px;

  width: var(--size);

  height: var(--size);

  transition: transform 200ms;

  padding: 10px;

}

​

.item {

  width: 100%;

  height: 100%;

}

​

.box:nth-child(1) .item {

  background-color: black;

}

​

.box:nth-child(2) .item {

  background-color: red;

}

​

.box:nth-child(3) .item {

  background-color: green;

}

​

.box:nth-child(4) .item {

  background-color: blue;

}

​

.box:nth-child(5) .item {

  background-color: yellowgreen;

}

​

.box:nth-child(6) .item {

  background-color: cyan;

}

​

.box:hover {

  transform: scale(1.6) translateY(-15px);

}

​

.box:has(+ .box:hover),

.box:hover + .box {

  transform: scale(1.3) translateY(-8px);

}

​

​