CSS transition - invert the origin/direction - css

Question

I'd like to make my label animation from top to bottom instead of from bottom to top. So the top is going to open and the bottom stay there:
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
vertical-align: middle;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
float: left;
transition: width 1.5s, height 1.5s;
transition-duration: 1.5s
}
div.label4:hover {
height: 194px;
}
<div class="label4"></div>

Answer 1

Just wrap it in a parent with flex-direction: column-reverse and you're done:
.parent {
display: flex;
flex-direction: column-reverse;
height: 388px;
width: 278px;
}
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
vertical-align: middle;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
float: left;
transition: width 1.5s, height 1.5s;
transition-duration: 1.5s
}
div.label4:hover {
height: 194px;
}
.parent {
display: flex;
flex-direction: column-reverse;
height: 388px;
width: 278px;
}
<div class="parent">
<div class="label4"></div>
</div>

Answer 2

If you can alter the HTML you could create a container, and then position .label4 using position: absolute and bottom
.parent {
height: 388px;
padding-top: 10px;
position: relative;
}
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
vertical-align: middle;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
float: left;
transition: width 1.5s, height 1.5s;
transition-duration: 1.5s;
position: absolute;
bottom: 0;
}
div.label4:hover {
height: 194px;
}
<div class="parent">
<div class="label4"></div>
</div>

Answer 3

You can achieve your desire animation by transform which is more flexible and better and set transform-origin to each side your element,
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
transition: transform 1.5s;
transform: scaleY(1);
transform-origin: bottom center;
}
div.label4:hover {
transform: scaleY(0.5);
}
<div class="label4"></div>