Currently, I'm working on a slider for images that includes titles overlaping the boundaries of the images. To achieve this effect, I have created a wrapper div positioned at the center of the page using
position: relative;margin: 0 auto;Within the wrapper, there is an image wrapper with double width. Inside the image wrapper, there are two divs containing titles for each image. These divs have a width of 500 each, and they are positioned next to each other using float:left. The titles inside them are given a 'margin-left: -10px;' property, absolute position, and overflow: visible; in order to allow the titles to overflow by 10 pixels outside the wrapper.
I am wondering if there is a way to accomplish this effect successfully?
Below 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;
}