BuddyPress.org

Hey folks.

I’ve adapted Activity Plus to insert images with a max width of 550px and then on hover display it in full size in a light-box type effect. I’m having trouble with the overflow because the “light box” gets cut off outside of the activity-inner class.

You can see this happen at http://nagualgrove.com/. Hover over one of the images in the Activity Stream.

Does anyone see any answers?

I tried to add overflow:visible; to each nested div, but I can’t get it to spill over into the sidebar area and the Comments etc tabs reposition themselves.

This is the CSS I have in operation to create this effect:

`.bpfb_images {display:block; width:100px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 50px; float:left; position:relative; z-index:50;}
.bpfb_images img {display:block; border:0;}
.bpfb_images:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
.bpfb_images b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;

border-radius:3px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);

-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}

.bpfb_images:hover b {top:-120px; left:110px; padding:10px; border:1px solid #ddd; background:#fff; opacity:1.0;}
`