The Zindex does nothing to organize my images

Hi I’m trying to get an image to come to the front but the Zindex isn’t doing anything. Let me know what I can do.
http://fetchpark.webflow.io/![|625x500](upload://ipI64RcJ1CWiyRTD4NEiMP6rQCn.png)

Hi @run420, Could you share the site read-only link: Share a read-only link | Webflow University, it makes thing much easier to troubleshoot :slight_smile: Also, is the image the image of the woman ? Which image is it ?

Cheers,
Dave

It’s the arrow below the face. You can see a little bit of it on the left.
https://preview.webflow.com/preview/fetchpark?preview=21e1174f6e7d488fa0194b59dd426e77

Hi @run420, how is that image not working exactly for you? When I view on the published site, and in the preview mode, the image is appearing on top. How does it look like for you in published mode, can you send a screenshot?

Cheers,
Dave

It looks like that for me. The arrow is behind the car image.

Hi there run420, I do not think the issue is the z-index, rather that the slider height is 300px, and the image is getting cropped. Try giving your slider some height:

Check it out and let me know if that helps :smile:

Cheers,
Dave

I got it to work by adding extra space, but the Zindex still doesn’t work if I want to have the arrow closer tot he space on the bottom. once I enter the other div block area it gets tucked under again.

Hi @run420, do you have a pic, what the arrows should look like, when properly positioned to the content?

Hi @run420, sorry for the late reply, I gotcha now, is it possible for you to check the read-only link again? The old one does not appear to be valid anymore. If you still need assistance with this, I can take another look :slight_smile: Cheers,
Dave

https://preview.webflow.com/preview/fetchpark?preview=25362081e213a3a49d2672f61e8fad16

Hey there @run420, I was looking at this, and one issue is that the arrows you want to show are part of the slider, which has the overflow set to hidden, thus the arrows will not show as you want with styling on the slider at present.

If you set slider to overflow visible, that will allow you to position those arrows so they are visible outside the border of the slider, but then this introduces horizontal overflow on the page, which is not desired either.

I think the layout is going to need to be changed, and I am experimenting with some layouts to try to get the effect you are after… more info to come.

ok, thanks Dave.

Another issue I’m running into - I set the slider to auto fade in and out but I would like it to stop when hovered over or clicked on. Is that possible? I’ve been trying to change it but it’s not working.

Hi @run420, thanks for the followup. I will check that hover thing out. So basically, if I understand right, you have a slide that has fade set as the transition, with the slides changing automatically, and when you hover over the slide or click, you want to pause and then when hover out, resume ?

This is not default behavior, so it is not possible to do this with the native widget (yet, but great idea!). There might be something that can be done using custom code. (I am not sure…) I will check :slight_smile:

Yes, I would like the hover or click feature to work.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.