Question

I’m trying to use only css to turn a nested div and a normal div into something where the top one can be hovered to view more content without moving all the layout around.

Essentially:

[hover me for more]

[content-that-gets-overlapped-by-hover-content]

or see the nearly-working example on jsfiddle:

http://jsfiddle.net/tchalvakspam/vVgY2/9/

Unfortunately, when you do overflow:visible, it seems to be nearly useless because you can’t give the content that overflows any background style, so it remains unreadable.

Is that right, there is no way to give overflow:visible overflowing content a background? If that is the sad state of affairs, what is the shortest amount of changes that could be done to that content to turn it into a readable hover-to-expand section?

Answer 1

Finally found the solution in the form of a sibling selector on the hover to give the next element after the hovered element a margin to take the place of the now-absolute hover element.

http://jsfiddle.net/tchalvakspam/MBcDW/

So the pertinent css becomes:

#fixed-height{
    position:relative;        
    width:100%;
    height:1.25em;
    overflow:hidden;
    background-color:lightblue;
    color:red;
    z-index:10;
}
#fixed-height:hover{
    overflow:visible;
    height:auto;
    position:absolute;
    max-width:20em;
}
#fixed-height:hover + #right-below{
    margin-top:1.25em;
}