Showing Image on top of the slider background

[Dexter_Lam]

Hi, everyone
I’m trying to create a design that shows the image on top of the white slider background.
I tried to change the z-index, but it is not working as I expected.

Does anyone have any idea how to make it work?

Thank you.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Stan (justAnotherDeveloper)]

hi @Dexter_Lam you have on image set bottom: 40vh!!! just remove it or change it to px unit.

Hope this will solve your request.

[Dexter_Lam]

Thank you for your reply, but I don’t think it is what I’m trying to solve.
The image is positioned in absolute, so the bottom isn’t the issue.

What I’m trying to solve is about z-index, which makes the image show on top of the white background.

[Stan (justAnotherDeveloper)]

hi @Dexter_Lam this is not possible without hacking mask as mask will crop everything outside. You can search this forum if you will find something that will help you to understand how it can be done but you will need custom JS like eg. Observer.

here is how I have solved while ago

[SOLVED]Slider text manipulation

Hi, @anthonysalamin I had now time to look into MutationObserver and I have to thank you to point me in the right direction. It took me almost 2 days (I know ) to get it to work. Lots of reading, trial-fails in DevTools but finally I’m there. I would like to share my code as an example if someone will need it. Basic Idea was to have slider text shifted out over the slide. In the first place I was able to HACK it with CSS it works fine but it wasn’t a clean job. More importantly, I h…

but feel free to look for other solutions.

[Dexter_Lam]

Thank you so much Stan. I’ll take a look in Observer.