Hidden item interfering with buttons

Hello, I have a hover interaction in my vendor section that reveals images on hoover. I think it looks cool but now it is interfering with my button elements on the page. I tried making the z-index higher on the buttons but no avail. Is there a work around this? thank you

https://zocalo-food-park.webflow.io/


Here is my public share link: LINK
(how to access public share link)

@Christopher_Nelson - which buttons is the image interfering with? Can you provide a few screenshots?

These buttons, Now I have changed my html structure a little bit to see if I could fix the problem. No luck and Now Im having an issue with the middle link not responding when I hoover over it.

This is how I want all vendor links to respond without interfering with other elements.

https://zocalo-food-park.webflow.io/

Please let me know if you need more clarification.

Could you share a read-only link to your site?

Hi, sorry bout that, I thought publish was the read only link. Thank you very much for your assistance.

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=dashboard&utm_content=zocalo-food-park&preview=369e4a1f8db2eaea35bbe82d590acbfc&mode=preview

Okay, I checked it out, and it looks like your image that goes above the middle “vendor-div” is set at a higher z-index than the vendor-div itself.

Set the middle vendor-div to “position: relative” and to a z-index higher than 1 (which is the images z-index) and it should work as intended.

There’s also a little error with the interaction of the middle vendor-div, since another links underline gets triggered when hovering it. You should probably take a look at that also :slight_smile:

Great thanks I will check this out to see if this works

Hello, Ok so it still is really buggy and links are being triggered without me hovering over them. I have tried figuring it out but no avail. Does anyone have a solution?

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=dashboard&utm_content=zocalo-food-park&preview=369e4a1f8db2eaea35bbe82d590acbfc&mode=preview

Here is an image. when I hover over the middle link the bottom left link highlights. Not sure why it is doing this.

@Christopher_Nelson - your image is nested in your link block so when you hover on the area where the image appears it will run your hover animations.

image

If I were you I would move the images outside of the anchor to prevent this, you could nest them in the containing div and still fade it in when mouse hovers over the div.

As far as your z-index goes - I would assume your goal is for the image to come up behind ALL of the text in the yellow section, is that correct?

If so, you should move all of your images to be immediate children of this element:

image

So something like this:

Then set a z-inded on your image of 1 and a z-index on your vendor-holder of 2. That will give you a result like this:

Got it! works so much better now, thank you! :pray: