Hello, I am currently working on implementing a crossfade effect for the banner images on my homepage using jQuery. The fading effect is functioning correctly with the following code:
<script>
function bannerImages(){
var $active = $('.banner-test .banner_one');
var $next = ($active.next().length > 0) ? $active.next() :
$('.banner-test img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 7000);
})
</script>
While this is working well, there is one issue that I have encountered. In order for the crossfade effect to work properly, position:absolute needs to be applied to the .banner-test img class. However, within the .banner-test class, there is another div used to display text on top of the banner image:
<div class="banner-test">
<img class="banner_one" src="../image.jpg" alt="" />
<img src="../image2.jpg" alt=""/>
<div id="text">
<p class="text1">Sample Text</p>
</div>
</div>
This brings me to the css for the #text:
#text {
position:absolute;
bottom:35px ;
left:10px;
width:70% ;
background-color:#104E8B;
font-size:1em;
color:white;
opacity:0.95;
filter:alpha(opacity=95); /* IE transparency */
}
.text1 {
padding:13px;
margin:0px;
}
.banner-test {
display: block;
position: relative;
}
If I apply absolute positioning to the image, it disrupts the layout with the text as everything gets pushed to the top of the page. Does anyone have suggestions for a workaround?
UPDATE
https://jsfiddle.net/ztrez888/1/embedded/result/ - in this fiddle, applying position absolute to the .banner-test img causes the text to disappear.