Show some extra information on hover
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.
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.
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.
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_into 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_outand write it next to
layerAnimationPlayInseparated by a single comma.
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.
Create custom animation - top row
The top row needs to play in on the
top_inevent, and fade out on the
Trigger the event - top row
Now all you need to do is to trigger the
top_outevent from the top row's Mouse leave event.
That's it, the effect is done.
Do you want to show extra information if you hover over a simple image without the text? For that you can use the Transition layer Pro.