Skip to:
Content
Pages
Categories
Search
Top
Bottom

Difficulties with overflow in activity stream

  • Avatar of number_6
    Number_6
    Participant

    @number_6

    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;}
    `

You must be logged in to reply to this topic.