css - Slider with pattern overlay issue -
I'm trying to create a slider that fades through images and text, for example using FlexSlider It is very easy to do, but how do I create it so that the slider has a pattern overlay that is above the image, but down text
& lt; Div class = "flexslider" & gt; & Lt; Div id = "pattern" & gt; & Lt; / Div & gt; & Lt; Ul class = "slide" & gt; & Lt; Li & gt; & Lt; Div class = "slider_text" & gt; & Lt; Span & gt; Some text & lt; Br / & gt; Image above & lt; / Span & gt; & Lt; / Div & gt; & Lt; Img src = "http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "slider_text" & gt; & Lt; Span & gt; Some text & lt; Br / & gt; Image above & lt; / Span & gt; & Lt; / Div & gt; & Lt; Img src = "http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" /> & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; I have added the pattern to Bella, but it also covers the text ... is there any way to do this? Either, but so far this is the only solution I can think of. Thank you!
Then we move the pattern to ul
and set the z of text -index
more
CSS:
.slider_text {z-index}
: 99 9; }
Then we move inside #pattern
to ul
.
HTML:
& lt; Ul class = "slide" & gt; & Lt; Div id = "pattern" & gt; & Lt; / Div & gt;
Comments
Post a Comment