Streaming live at 10am (PST)

Z-index interaction

Hi,

I try to do an interaction that change z-index between the images (Founder1, Founder3).
you can see the interaction on the div buttons at the bottom hero section…
No matter what i try, its faild :frowning:


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

Hey @Eyed,

You can’t animate the z-index of objects. But do this to get it right:

  1. In the Designer, the layer stack (without z-index set) goes from “Bottom to Top”. So the lowest object in the stack will be first in your interaction, especially if they’re set to absolute.

  2. In the Layers panel, note each item and animate them in the order they’re stacked. The top most item will be last in the animation.

  3. First item in the layer stack (the lowest item) will animate first

This a simple way of figuring out how to move them through your interaction. If you do use z-index numbers. Make the first in the animation to move is the lowest in the #'s; I.e, z-index: 1

Hope this helps. Let me know how it goes :slight_smile:

thanks!

Let me be sure I understand
Actually, I arrange the images in overlays according to the z-index of each image. So far it’s clear to me
But how do I create an interaction that moves them?

I think you can animate z index on hover - with transitions… add a z-index transition to your element, go to “hover” selector and then change the z-index of the element