Events - Show some extra information on hover

Be sure to switch to Canvas mode before you start this tutorial.
Creating the structure

This tutorial requires having an image layer, two heading and one text layers and an area layer. For the optimal result, I'll need the layers in a certain order:

  1. Heading layer (hover state)
  2. Area layer (hover state)
  3. Heading layer (normal state)
  4. Text layer (normal state)
  5. Image layer

To create this order, I'll need to add them in a reverse order, starting with the image layer. The image I'll use is 250x250px. It's important to remember these values, they'll be important later.

I suggest putting the heading and text layers into two different rows, it will be be easier to manage them later. One rows should have a background color, the other doesn't. After you added all layers, your layer list should look like this.

Configure all layers to your liking. To make the area layer appear as a perfect circle, you should make its width and height equal to the width or height of the image. Set the border radius to this same value.

If you are using a rectangle image, use the shorter side. E.g. if your image is 720x400px, make your area layer 400px high and wide ans set the border radius to this value as well.
Layer sizes and chaining

Once your layers look fine, you'll need to do some size adjustment.

I'm using an image that is 250x250px. I'll need to make the two added rows to have this exact size. It can be done in two ways:

  1. resizing the layers by dragging their edges or
  2. writing the exact size values to the layer window's settings tab → width

After all layers have the same size (except the area layer, if the image isn't square), you should chain the area layer to the row without a background color. Select the row as parent, and chain them by their middle point. Once they're chained, move the area layer behind the row. If you go to the area's layer window → setting tab, you can check if you've done it right: the Position X and Position Y should be 0.

Setting up the layer animation - default state

The first part of this step is selecting the area layer's parent (which is a row) and creating its in and out animation. The default state of this slide is having the area layer and its parent row on the image.

This step I will show you how to set up its animation, but first let's see how the layers should behave.

  • On slider load: the layers should be visible
  • On layer mouse enter: the layers should be hidden
  • On layer mouse leave: the layers should be visible

The layers should be visible on slider load can be achieved with the default layer event, layerAnimationPlayIn. I'll put it to the "Plays in when" field.

To achieve the last two effects on the list, I'll use a custom event. The name of the custom event can be anything, which contains only letters of the English alphabet and numbers, without spaces. I'll name my event "incoming".

While I'm at the row, its worth setting up its out event as well. For this I'll need a custom event, which I can name anything. I'll use "outgoing".

Then you should set the triggers. The Mouse enter should trigger the "outgoing" event, and the Mouse leave should trigger the "incoming" event.

Turn on the Repeatable and turn off the Instant out for these layer animations, which you can do like this.

Copy the layer animation to the Area layer as well, so you won't have to set it up twice.

Setting up the layer animation - Hover state

At this step, we're done with the normal state, the only thing remained is to ensure that when the parent row and the area layer disappears the other row shows up. Go to this row and set up an IN and an OUT layer animation. Then go to the Events tab and trigger the IN animation on the "outgoing" event, and the OUT animation on the "incoming" event.

Be sure to turn on the Repeatable and turn off the Instant out for these layer animations here as well.