1

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

4
  • what do you mean by "titles to overflow those 10 pixels outside the wrapper" Commented Oct 8, 2013 at 4:14
  • Not related to your problem, but you are getting the id and class attributes the other way around. Maybe this article could help you. Commented Oct 8, 2013 at 4:27
  • @VinayPandey if you notice the title has margin-left: -10px; Commented Oct 8, 2013 at 5:14
  • @Sunyatasattva Yeah I'm still finding my way around css. thank you I'll do some reading Commented Oct 8, 2013 at 5:15

2 Answers 2

1

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/

Sign up to request clarification or add additional context in comments.

Comments

0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.