Overlapping and reveal content on hover

niccolomiranda · October 1, 2018, 6:44pm

Hello,

I’m trying to create a hover effect menu on my portfolio.

The idea is reveal an image when you hover with the cursor on each specific link. I’ve done it, but I would like each image to be below the reference text and above the others. Currently, however, each image is located under each link.

I know I have to work with z-indexes and positions but I’m finding it difficult.

Here is my site Read-Only: https://preview.webflow.com/preview/niccolomiranda?utm_source=niccolomiranda&preview=f99439921c61c4335034ebc97b498bf8

cyberdave · October 4, 2018, 5:03am

Hi @niccolomiranda, can you help to clarify this: “but I would like each image to be below the reference text and above the others”.

Do you have a mockup of what it should look like? I am having trouble visualizing that.

Thanks in advance

niccolomiranda · October 4, 2018, 7:23am

Yes @cyberdave . This is the the hover effect on the first two links.

Screen 1: Text (level 2), Image (level 1), Other Links (level 0)
Screen 2: Text (level 2), Image (z-index 1), Other Links (z-index 0)

The problem is that when I impose the z-index, at the next hover the x-index should change dynamically, I can not find the solution. But it must be possible to do so.