✅ Как создать slide up анимацию?

Данная анимация представляет собой смену цвета блока через плавный переход. Туда можно вставить любой текст и он также будет появляться вместе с цветом. ⬇️

☑️ Ниже мы оставляем пару строк HTML и CSS кода для создания slide up анимации.

<div class="box">
  <div class="hid-box">
</div>

.box {
  height: 90px;
  width: 100px;
  margin: auto;
  overflow: hidden;
  background: #b6feb4;
  cursor: pointer;
}
.hid-box {
  top: 100%;
  position: relative;
  transition: all .7s ease-out;
  background: #b8dbf1;
  height: 100%;
}
.box:hover > .hid-box{
  top: 0;
}

@code_ready | #практика #html #css