The Bring to Front interaction gives you a quick way to pull a layer to the topmost position in a “stack” of layers on the canvas. Using On Click, On Hover, or On View triggers, you can arrange a layer to be brought to the front of the surrounding layers—this can solve for unwanted overlap of layers. It’s an especially helpful interaction when working with Object States.
Take a look at these two examples:
These two examples are set up almost identically—with the difference being that in the second example, each image also has an “On Hover > Bring to Front” interaction applied. This interaction ensures that the image is being pulled to the highest layer so that when expanded, it does not get hidden or overlapped by the images surrounding it.
As you can see in the screenshot below, we applied our hover state to the image (which automatically generates an On Hover > Change target state action), and then added a second interaction to each image On Hover > Bring to Front.
Things to note:
- This interaction can be triggered by On Click, On Hover, or On View interactions. On Click > Bring to Front has a sister interaction called Reset Position(s) that enables you to send a layer back to its original position in the layer stack—more on this below.
- This interaction can be added to individual layers, groups, or layers within groups.
- If applied to layers or groups, the targeted layer or group will be pulled to the topmost position on the canvas.
- If applied to layers within groups, the layer will be pulled to the topmost position within the group itself.
- The Bring to Front interaction is self-targeting — the interaction can only target the layer or group itself.
Reset Position(s)
The Reset Position(s) interaction is the opposite of Bring to Front. It will move a layer or group from the topmost position back to its original z-position. Unlike Bring to Front, this interaction is not self-targeting — it can be used to reset the position of one or more elements.
Take a look at the video above. In this example, we’ve added an additional Click state to enlarge the image, an On Click > Bring to Front interaction to ensure each image gets pulled to the top layer, as well as an On Click > Show > arrow_icon.svg interaction to reveal an arrow in the top corner.
On the arrow, we’ve applied an On Click > interaction that targets each image, and we made sure to check the box to return each asset to its Default State.
Here’s what that looks like in the studio:
Incorporating a Bring to Front interaction can change the way you work with Object States in Ceros. If you have any questions about the interaction or how it works, please don’t hesitate to reach out to our support team in the chat in the studio!