Search code examples
jqueryhtmlcssjquery-uijquery-cycle2

Text over a image slideshow - jQuery cycle2


I'm using jquery cycle2 plugin for the slideshow. Now i'm facing a challenge. I'm able to make the slideshow with the use of that plugin but the thing is i want to write some text on top of the image and the text needs to appeared only for that particular image. But if I use make the slideshow div position relative and the text div position absolute using css nothing's happening.

Code HTML :

<div class="offset1 span12 cycle-slideshow">
    <img src="assets/img/1.jpg">
        <div id="text1">
            <strong>A</strong><span>lpha</span>
        </div>
    <img src="assets/img/2.jpg">
    <img src="assets/img/3.jpg">
</div>

Code CSS :

.cycle-slideshow {
position: relative; 
}
#text1 {
    position: absolute; 
    top: 200px; 
} 

Anyhelp will be very much pleased.


Solution

  • this may help u.if stil this not working means ur slide div may contain large z-index than ur text div

    .cycle-slideshow {
    position: relative; 
    z-index:1;
    
    }
    #text1 {
        position: absolute; 
        top: 200px; 
        color:#fff;
        z-index:2;
    
    } 
    

    http://jsfiddle.net/TDSFF/