Show some extra information on hover

1

Creating the structure

In this tutorial I'm using two rows, each with one column. The bottom row has a heading layer, the top row has a heading and a text layer.

The image is set as the background of the bottom row layer, and there is an orange background on the column of the bottom row.

2

Set up the layer animations - bottom column

The first animation we'll do is animating the column of the bottom row layer. Simply go to Layer window → Animations → In and select Fade from the Fade group. Then go to the Out tab and select the Fade out animation.

Then turn on the Repeatable option.

3

Trigger the event - bottom row

Select the bottom row layer and go to it's Layer window → Animation tab → Events. Create a custom animation which will be triggered on Mouse enter. I'll create top_in, indicating that it moves in the top layer.

4

Create custom animation - bottom column

Now select the column of the bottom row. Go to Animations → Events and let's trigger the layer's animation. We want this layer to play out when the top layer shows up, so write top_in to Plays out when. The layer should show up when the slider gets visible, which can be done with the layerAnimationPlayIn default event. Apart from this, we also want this layer to fade in when the top layers fade out. So create another custom animation, top_out and write it next to layerAnimationPlayIn separated by a single comma.

5

Set up the layer animations - top row

Now let's select the top row. Set an In animation and an Out animation for the layer at the Layer window → Animation tab. I will set Fade from the Fade group.

Then turn on the Repeatable option at the Events tab.

6

Create custom animation - top row

The top row needs to play in on the top_in event, and fade out on the top_out.

7

Trigger the event - top row

Now all you need to do is to trigger the top_out event from the top row's Mouse leave event.

That's it, the effect is done.