Shrink a div to it's horisontal center - html

Question

I am trying to implement a CSS3 animation on my site where 2 divs would squeeze together another div with a background image. It's pretty hard to explain, so I made a quick video. Please note that the problem I want to solve is present on this video.
What I'd like to do is when animating the height of a div, it wouldn't shrink to it's horisontal center instead of it's top.
Can this be done in any way?
My HTML:
<div id="container">
<div id="top-bar">
<ul id="nav">
<li>Főoldal
</li>
<li>Szolgáltatások
</li>
<li>Portfólió
</li>
<li>Kapcsolat
</li>
</ul>
</div>
<div id="content">
<div id="card">
<!-- The orange card : irrelevant -->
</div>
<div id="main">
<div id="inner-content"></div>
</div>
</div>
<div id="bottom-bar">
<div id="logo">
<!-- Logo Image -->
</div>
</div>
</div>
Please check the jsFiddle examples for the full code.
jsFiddle code
jsFiddle Full Screen Result

Answer 1

I have created a fiddle here. Every time you click the button it will add/remove the class that has the scaling transform.
CSS:
.box {
width: 300px;
height: 300px;
background: black;
-webkit-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;;
}
.box-change {
-webkit-transform: scale(0,0);
}
JS:
$(function() {
$("#bt").click(function() {
$(".box").toggleClass("box-change");
});
});
HTML:
<div class="box"></div>
<input type="button" value="Let's Do This Thing" id="bt">
You can change CSS to this:
.box-change {
-webkit-transform: scale(1,0);
}
for shrinking to "horizontal center" effect.

Answer 2

See this demo
fiddle
The CSS is:
div {
width: 200px;
position: absolute;
}
.mid {
background: url("http://placekitten.com/200/300");
height: 200px;
top: 100px;
-webkit-transition: all 2s;
transition: all 2s;
}
.top {
top: -100px;
height: 100px;
background-color: gray;
}
.bottom {
bottom: -100px;
height: 100px;
background-color: gray;
}
.mid:hover {
height: 0px;
margin-top: 100px;
background-position: 0px -50px;
}
The trick is to modify the height, and at the same time change the margin-top so that the center stays at the same place. And at the same time change the background position, also accordingly.
I have done this effect because this is what I saw in the video, even though your question seems to ask for the background shrinking. If what you want is the later, please say so.