CSS transition, collapsing width/height to center of div - html

Question

Below is my effort.
http://liveweave.com/i1qkNw
Below is also my code
.container {
display: inline-block;
position: relative;
border: 1px solid green;
}
.middle {
position: relative;
width: 300px;
height: 250px;
background: black;
}
.door {
position: absolute;
width: 300px;
height: 250px;
background: red;
top: 0;
left: 0;
opacity: 0.5;
transition: .5s;
transform-origin: center center;
}
.container:hover .door {
transition: .5s;
opacity: 0;
width: 0;
height: 0;
}
<div class="container">
<div class="middle"></div>
<div class="door"></div>
</div>
What i want to do is, when user hovers over container, I want the door div's width/height to be zero. As you can see, I am achieving this effect but it disappears to upper left corner. Is there any way I can make it disappear to its center?? Like the width and height are reduced till its center and disappear.
Kindly guide me how to achieve this effect.

Answer 1

You have to set top / bottom / left / right values to 50%.
.container {
display: inline-block;
position: relative;
border: 1px solid green;
}
.middle {
position: relative;
width: 300px;
height: 250px;
background: black;
}
.door {
position: absolute;
width: 300px;
height: 250px;
background: red;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
transition: .5s;
transform-origin: center center;
}
.container:hover .door {
transition: .5s;
opacity: 0;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
width: 0;
height: 0;
}
<div class="container">
<div class="middle"></div>
<div class="door"></div>
</div>