Hello stackoverflowers !
Im writing to you right now because I've been using owl-carousel for a while now and for a specific case I need to do something I never needed before, an overlay in between a slide and its description.
So for now I have my website's mockup, and I started to try some things like adding my overlay as a :before of the 'owl-carousel'. Then I played with my z-index(es) and added static positioning to every inner classes before the slide div wrapper itself.
Sadly z-indexes are not working and the overlay and the slide (image and text) keep being 2 entities on top or below each other.
<div class="owl-carousel">
:before <-- my overlay
<div class="slide">
<img src="photos/slide1.jpg">
<div class="description">
text that need to be over the overlay
</div>
</div>
<div class="slide">
<img src="photos/slide2.jpg">
<div class="description">
text that need to be over the overlay
</div>
</div>
<div class="slide">
<img src="photos/slide1.jpg">
<div class="description">
text that need to be over the overlay
</div>
</div>
</div>
this is an exemple of what I want to have working like you can see on this picture > https://i.stack.imgur.com/LZsoW.jpg
(the photo with the trainer below everything would be my slide img and "nouveau concept - le coaching accessible à tous sans rdv en 35min" the description attached, yeah sorry, it's in french :))
having the blue overlay in between slide image and the description attached where you can slide the image and the text in the same time.
Do you guys have any suggestion to do this thing ? I would be so glad. I know it's something that might be simple but I can't put my finger on it :( its soo frustrating !
thanks in advance !
ps: sorry if I messed up writing things in english.
