Элемент перехода от высоты 0 до 100, начиная снизу

Question

Я пытаюсь сделать мой модальный переход снизу вверх при активации, мне не повезло с transform-origin: bottom, я сделал пример кода

HTML

<div class="main"> 

  <div class="hidden">HOVER</div>
</div>

css

.main{
  height: 500px;
  width: 500px;
  background: blue;

}
.hidden{
 height: 0px;
  width: 300px;
  background-color: red;
  transform-origin: bottom;
  top: 100%;
  -webkit-transition: 1s;

}
.hidden:hover{
  height:200px;
  -webkit-transition:height 1s;
}

https://codepen.io/danielkmx/pen/OevOLW

Answer 1

Вы можете сделать это с помощью комбинации относительного / абсолютного положения для двух DIV (родительский относительный, дочерний абсолютный) и в соответствии с настройками положения относительно bottom родительского элемента:

.main {
  height: 500px;
  width: 500px;
  background: blue;
  position: relative;
}

.hidden {
  height: 16px;
  width: 300px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: red;
  transition: 1s;
}

.hidden:hover {
  height: 200px;
}

<div class="main">
  <div class="hidden">HOVER</div>
</div>

Answer 2

Это должно сработать для вас, но это может немного поморгать.

.main{
  height: 500px;
  width: 500px;
  background: blue;

}
.hidden{
 height: 0px;
  width: 300px;
  background-color: red;
  transform-origin: 100% 0;
    transition: all 1.0s;
  position: relative;
  top: 200px;


}
.hidden:hover{
  height:200px;
  top: 0px;
  transition: all 1.0s;

}