One div class affecting another with hover and transitions. Use of "combinator" for parent (box1) and its sibling (box2).

Preview in Chrome or Safari.

Hovering over box1 affects box2, and reveals content that was hidden. The z-index also changes so that box2 is above the other boxes around it. A white border is added on transition.

"Holding-box" div is floated so that the expanding content does not interfer with the rest of the layout. Border added to show where the box is while constructing this demo.

 

box1 >>

Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div.

Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div.

Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div.

Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div.

Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div. Text inside of a box, or div.

box1 >>

box2

more >>
more >>

box2

 

Paragraph, with "clear: both".

Regular p tag.