DIV with padding-left property gets pushed to the right

Question

JSFiddle Example

So, my problem is the following. I have a 9-tile grid which I want to make responsive.

I need every tile when hovered to increase its size from 210x210px(incl. 5px margins) to 420x420px, so tiles A and B work fine, increasing in size to the right and downwards, but when I get to tile C, a problem apears. Even though all the tiles have an absolute position, when I hover over C, it's padding-left property doesn't increase its size to the left, but rather pushes it to the right. Is there a solution to this problem?

My idea is for every tile when hovered to uncover three hiperlink image slots. The left and central tiles respectively to display one slot to the RIGHT and two BELOW themselves, while the right tiles- one slot to the LEFT of them and also two BELOW.

This is what the CSS looks like:

#row1-col1 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: red;
    margin: 5px;
    -webkit-transition: padding-right .5s, padding-bottom .5s;
    transition: padding-right .5s, padding-bottom .5s;
    z-index: 98009;
}

#row1-col1:hover {
    padding-right: 210px;
    padding-bottom: 210px;
}

#row1-col2 {
    width: 200px;
    height:200px;
    position: absolute;
    top: 0px;
    left: 210px;
    background: red;
    margin: 5px;
    -webkit-transition: padding-right .5s, padding-bottom .5s;
    transition: padding-right .5s, padding-bottom .5s;
    z-index: 98008;
}

#row1-col2:hover {
    padding-right: 210px;
    padding-bottom: 210px;
}

#row1-col3 {
    width: 200px;
    height:200px;
    position: absolute;
    top: 0px;
    left: 420px;
    background: red;
    margin: 5px;
    float: right;
    -webkit-transition: padding-left .5s, padding-bottom .5s;
    transition: padding-left .5s, padding-bottom .5s;
    z-index: 98007;
}

#row1-col3:hover {
    padding-left: 210px;
    padding-bottom: 210px;
}

Thanks in advance for any advice that you can offer, because I've been banging my head all night trying to solve this, but without any luck. The best I could get, was for the (C) tile to expand downwards only, but this configuration left the 9th and last tile (I) unable to increase its size in no direction, so being able to expand the right side tiles to the left will be vital for me in this mini project.

WARNING! THIS PART IS MESSY!: The options I've tried out so far are as follows: -Set float: left; to all tiles (the original idea). Result- Failure / C-tile can't rezise to the left. -Set absolute positions to all tiles. Result- Failure / C tile can't resize to the left. -Set absolute positions to all tiles BUT C-tile. Result- Failure -Set float: left; to A and B and absolute position to C in the hope that because A and B "ignored" C in their expanding, they wouldn't stop it from expanding to the left. Result- Miserable Failure.

Answer 1

Here's your fiddle and a proper animation :)

fiddle

Here's the changed css

#row1-col3 {
    width: 200px;
    height:200px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: red;
    margin: 5px;
    float: right;
    -webkit-transition: padding-right .5s, padding-bottom .5s;
    transition: padding-right .5s, padding-bottom .5s;
   z-index: 98007;
}

#row1-col3:hover {
    padding-right: 210px;
    padding-bottom: 210px;
    z-index:98009;
}