CODEWITHSUNDEEP
jqueryhtmlcss
Gatos
Gatos

Reputation: 158

Show overflow even if parent has overflow hidden

I'm designing a slider for images along with titles for said images. Want I want to do is to have the title escape the boundaries of the images.

So what I've done is I created a wrapper for the whole thing. The wrapper div is position at the center of the page with position: relative;margin: 0 auto; with a width of 500 pixels and hidden overflow.

Inside it is the image wrapper which has double width. Inside the image wrapper are two div's each with a tittle. Their width is 500 each and they are position one next to the other with float:left The title inside them has a 'margin-left: -10px;' and absolute position and overflow: visible; What I want is for the titles to overflow those 10 pixels outside the wrapper.

Is there anyway I can achieve this ?

Here is an example code

Html:

<div id="wrap">
<div id="imgwrap">
    <div id="imgbox" class="firstimg">
        <div id="imgtitle">
             <h3>Title here</h3>

        </div>
    </div>
    <div id="imgbox" class="secondimg">
        <div id="imgtitle">
             <h3>Title here</h3>

        </div>
    </div>
</div>
</div>

JS:

jQuery(document).ready(function ($) {
$("#imgwrap").mouseleave(function () {
    $(this).find('#imgbox').stop().css('marginLeft', '0');
    $(".secondimg").find('#imgtitle').stop().css('marginLeft', '0');
}).mouseenter(function () {
    $(this).find('#imgbox').animate({
        marginLeft: '-500px',
    }, 1000);
    $(".secondimg").find('#imgtitle').animate({
        marginLeft: '-10px',
    }, 1000);
});
});

CSS:

#wrap {
width: 500px;
position: relative;
margin: 0 auto;
overflow:hidden;
}
#imgwrap {
overflow:hidden;
background: red;
height: 500px;
width:200%;
position: relative;
}
#imgbox {
float:left;
height: 250px;
width: 500px;
overflow: visible;
position:relative;
top:20%
}
.firstimg {
background: blue;
}
.secondimg {
background: green;
}
#imgtitle {
background: black;
width: auto;
position: absolute;
overflow: visible;
bottom:0;
}
.firstimg #imgtitle {
margin-left: -10px;
}

h3 {
font-size:20pt;
line-height: 0em;    
color:white;
padding: 0 80px 0px 10px;
}

Link to Fiddle

Upvotes: 1

Views: 360

Answers (2)

aayush shrestha
aayush shrestha

Reputation: 1918

Add padding-left:10px in you #wrap.

Remove overflow:hidden from your #imgWrap

In your javascript, edit this part

$(this).find('#imgbox').animate({
        marginLeft: '**-510px**',
    }, 1000);

Here's the JFiddle : http://jsfiddle.net/k3cPK/7/

Upvotes: 1

gwillie
gwillie

Reputation: 1899

the div.imgtitle will grow to fit content because you have width:auto. explicitly set a width:150px and also set white-space:nowrap and it should overflow

Upvotes: 0

Related Questions