jquery - Placing text over images -

I am using a website to create a slider I can easily create a slider using the following code:

  & lt; Div id = "owl-slider" class = "owl-carousel" & gt; & Lt; Div & gt; & Lt; Img src = "picture / 1.jpg" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "picture / 2.jpg" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "picture / 3.jpg" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Img src = "picture / 4.jpg" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Script type = "text / javascript" & gt; $ ("#Owl-slider") OwlCarousel ({item: 1, Autoplay: true, slide speed: 200, stop onhost: true, navigation: incorrect}} $ (document) .ready (function () {$ ("# owl -slider"). Owl Carousel ();});  

I also want to put some text on the images in the slider.

please check here

  
 
 gt; h1 & gt; lesson 1 & lt; / h1 & gt; & lt; p & gt; some text bla bla bla & lt; / p & Gt; & lt; / div & gt; & lt; img src = "http: // owlgraphic com / owlcusel / demo / assets / oval 1.jpg" />  & lt ; Div> gt; & lt; h2 & gt; Text2  & lt; img src = "http://owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" /> ; & Lt; / div & gt; & lt; div & gt; & lt; h2 & gt; Lesson 3 & lt; / h2 & gt; & lt; img src = "http://owlgraphic.com/owlcarousel/ Demos / assets / owl8.jpg "/ & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; H2 & gt; Text 4 & lt; / H2 & gt; & Lt; Img src = "http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" /> & Lt; / Div & gt;  

css

  .owl-carousel div h2, .owl-carousel div .textoverlay {condition: full; Color: #fff; Font-size: 12px; Display area; }  

I see the owl-crew using div to define thumb scroll, this means that you can make it easier to customize. See sample for custom owl scroll

Hope you can help :)