Overlapping divs on :hover

Question

I have divs that grow heightwise on hover and on hover I want them overlap all other divs, and not push them like in my example.

#container{
width: 300px;
}

#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}

#container .color1{
background: #444;
}

#container .color2{
background: #555;
}

#container .color3{
background: #666;
}

#container .color4{
background: #777;
}

#container .color5{
background: #888;
}

#container a div:hover{
height: 80px;
-webkit-transition: all 0.25s ease;
}

http://jsfiddle.net/MrSlacker/5wa3X/

score 3 · Answer 1 · answered Oct 22 '13 at 21:49

3

You can make some divs that act like rows for each three divs and set it with position:absolute and z-index.

Check this link http://jsfiddle.net/5wa3X/5/

answered Oct 22 '13 at 21:49

DaniP

37,813
8
65
74

score 0 · Answer 2 · answered Oct 22 '13 at 21:23

0

If they're all going to have fixed dimensions like in your example, position them all absolutely inside a container with position relative; this takes them out of the flow and they won't push any other content.

answered Oct 22 '13 at 21:23

RwwL

3,298
1
23
24

Ricardo Magalhães · Answer 3 · 2013-10-22T21:34:06.577

Well the obvious answer would be for you to use position: absolute for the container, and then position: relative with each one of those divs, so they don't affect each other's positions with the box-model. But that would mean for you to manually position them (each one) so they look like they're stacked...

But maybe there's a way around it using z-index. It would make sense that by sending the container to a lower z-index and allowing overflow, that the children would somehow "hold their ground"... but a quick experiment lead me nowhere. Will try to play with it more later :)

score 0 · Answer 4 · answered Oct 23 '13 at 04:58

0

You should use position: absolute with some positioning classes.

http://jsfiddle.net/5wa3X/6/

answered Oct 23 '13 at 04:58

bjb568

11,089
11
50
71

score 0 · Answer 5 · answered Oct 23 '13 at 10:13

0

and I play with Ricardo code..

use

.container div:hover {
    height: 80px;
    z-index:10000; 
    background-color:#ff0000
}

your issue get solved..

Credit goes to "RICARDO"

answered Oct 23 '13 at 10:13

Udit Bansal

41
3

score -1 · Answer 6 · answered Apr 23 '14 at 06:23

#container{
width: 300px;
}

#container a div{
float:left;
width: 100px;
height: 60px;
-webkit-transition: all 0.25s ease;
}

#container .color1{
background: #444;
}

#container .color2{
background: #555;
}

#container .color3{
background: #666;
}

#container .color4{
background: #777;
}

#container .color5{
background: #888;
}

#container a div:hover{
/*height: 80px;*/ /*No need to specify width in hover*/
-webkit-transition: all 0.25s ease;
}

Overlapping divs on :hover

6 Answers6