Geek Answers Handbook

DIV with padding-left attribute goes right

JSFiddle example

So my problem is this. I have a 9-tile set that I want to make responsive.

I need each tile to freeze to increase its size from 210x210px (including 5px margins) to 420x420px, so tiles A and B work fine, increasing in size to the right and down, but when I get to tile C, the problem arises. Despite the fact that all tiles have an absolute position when I hang over C, the padding-left property does not increase its size to the left, but rather directs it to the right. Is there a solution to this problem?

My idea for each tile, when it hovered, was to reveal three slots of the hiperlink image. The left and center tiles, respectively, display one slot on the RIGHT and two BELOWs themselves, and the right tiles - one slot for LEFT of them, as well as two BELOWs.

Here's what 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 you can offer, because I have been trying to solve this problem all night, but without any luck. The best I could get was that the tile (C) expanded only down, but this configuration left the ninth and last tile (I) unable to increase its size in any direction, so the ability to expand the right side of the tile to the left will be vital important to me in this mini-project.

! - !: , , : -Set float: left; ( ). . /C- . - . - /C . - , C-. - -Set float: left; B C , , A B "" C , . - .

+4
2

:)

fiddle

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;
}
+1

#row1-col3 left: 420px; right:0px.

PS - , 0. right:0.

, , , , . . http://jsfiddle.net/w5uVF/3/ .

0

More articles:


All Articles