Transition height, get bigger to 2 sides - html

Question

I just made a text window which gets bigger if you hover over it (with a transition that adds more height). It basically "drops" down to the bottom and pushes away the other text. Is there any way I can make it "drop" to the bottom by 50% and "climb" up by 50%?
#tcontent {
float: left;
background-color: yellow;
height: 150px;
width: 100%;
margin-top: 100px;
}
#mcontent {
float: left;
background-color: blue;
height: 30px;
width: 100%;
height: 150px;
transition: height 0.5s ease;
}
#bcontent {
float: left;
background-color: green;
height: 30px;
width: 100%;
height: 150px;
}
#mcontent:hover {
float: left;
background-color: blue;
height: 30px;
width: 100%;
height: 250px;
}
<div id="main">
<div id="tcontent">
</div>
<div id="mcontent">
</div>
<div id="bcontent">
</div>
</div>

Answer 1

This is awkward through conventional means as content flows from left to right, top to bottom and #mcontent needs space to move into above. However, this can be achieved by using flexbox.
Add #main with display: flex; to get its children to use the flexbox model
Add flex-direction: column; to #main to make the children order from top to bottom
Add height: 550px; to #main to make it as high as the three children will be when #mcontent is expanded
Add justify-content: center; to #main to center the children in the middle
The principle behind it is that the elements are set to always be in the middle of #main. When #mcontent grows, it pushes #tcontent up and #bcontent because they have space to move into. As they are set to be centered #mcontent will stay in the middle.
#main {
display: flex;
flex-direction: column;
height: 550px;
justify-content: center;
}
#tcontent {
background-color: yellow;
height: 150px;
width: 100%;
}
#mcontent {
background-color: blue;
height: 150px;
transition: height 0.5s ease;
width: 100%;
}
#mcontent:hover {
height: 250px;
}
#bcontent {
background-color: green;
height: 150px;
width: 100%;
}
<div id="main">
<div id="tcontent"></div>
<div id="mcontent"></div>
<div id="bcontent"></div>
</div>

Answer 2

The reason the div pushes and moves down is the default behavior of CSS height is to increase the height to the bottom. You can use a new CSS3 feature: Transformation . Precisely, the scale() function.
CSS:
Add these lines to your style
#mcontent {
transition: all 0.5s ease;
}
#mcontent:hover {
-ms-transform: scale(1, 1.2);
-webkit-transform: scale(1, 1.2);
transform: scale(1, 1.2);
height: 185px;
}
Also, in your stylesheet you're using multiple height properties together, in a single block. That's not a good practice, try cleaning those up.
#mcontent {
height: 30px; /* this line is not necessary */
height: 150px; /* as this line overrides the first one */
}

Answer 3

Please see my fiddle here.
I used margin-top: -50px; and animated the margin as well. Used margin for the top expansion and let the bottom expansion still make the div below slide.
EDITED CSS
#mcontent {
float: left;
background-color: blue;
height: 30px;
width: 100%;
height: 150px;
transition: height 0.5s ease, margin-top 0.5s ease;
}
#mcontent:hover {
height: 250px;
margin-top: -50px;
}

Answer 4

Use transform: scale(1,2); as shown in the snippet.
In your css you set height multiple times, try to avoid this. Also in the :hover declaration you only need to specify the parameters who change. So in this case only transform.
#tcontent {
float: left;
background-color: yellow;
height: 150px;
width: 100%;
margin-top: 100px;
}
#mcontent {
float: left;
background-color: blue;
width: 100%;
height: 150px;
transition: all 0.5s ease;
}
#bcontent {
float: left;
background-color: green;
width: 100%;
height: 150px;
}
#mcontent:hover {
transform: scale(1,2)
}
<div id="main">
<div id="tcontent">
</div>
<div id="mcontent">
</div>
<div id="bcontent">
</div>
</div>

Answer 5

If you can allow the effect to occur when hovering over #main and not just #mcontent, this works perfectly:
#main > div {
transition: all 0.5s ease;
}
#tcontent {
float: left;
background-color: yellow;
height: 150px;
width: 100%;
margin-top: 100px;
}
#mcontent {
float: left;
background-color: blue;
height: 30px;
width: 100%;
height: 150px;
/* new */
position: relative;
}
#bcontent {
float: left;
background-color: green;
height: 30px;
width: 100%;
height: 150px;
transition: all 0.5s ease;
}
#main:hover #mcontent {
height: 250px;
margin-top: -50px;
}
#main:hover #tcontent {
transform: translateY(-50px);
}
Fiddle demo here.