将子div设置为父div的中心

Question

I have a 2*2 matrix where the child div should zoom in and the remaining div's should be hidden.

I made this animation where every thing is working fine except that the div should like it is coming from its position but with my implementation every thing seems to come from the top left corner.

example : when user clicks on the div two it should seem like it should come from right top corner but now it is coming from left top corner.

any suggestions to make this work

FIDDLE

Answer 1

Use absolute positioning. You can either declare the CSS beforehand or inject it with JS.

.one, .two, .three, .four {
    position: absolute;
}
.two, .four {
    right: 0 !important;
}
.one, .two {
    top: 0;
}
.three, .four {
    top: 100px;
}
.big {
    top: 10% !important;
}

See Updated Fiddle