Question

Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.

I almost got it working except for the last part – hidden content does not stay on top even with z-index applied.

Here is the sample: http://jsfiddle.net/ZQ63X/

Answer 1

you need the css to be like this;

.item .item-1, .item .item-2{
    position:absolute;
    background-color:white;
}
.item .item-2{
    display:none;
}
.item:hover .item-2{display:block;}

hope I helped

/edit -> this way you dont even need javascript..