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
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.
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
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?
@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.
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: