Events - Show some extra information on hover

This tutorial is for Smart Slider 3.3.14. If you're using an older version, update.
Check out this documentation to understand how events work!
Be sure to switch to Expert mode to see all options in this tutorial.

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

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

The image is set as the background of the bottom row layer.

Set up the layer animations

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.

Turn on Repeatable for both layers.

Trigger the event - bottom row

Select the bottom row layer and go to it's layer window → Animations 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.

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.

Now let's select to the row. This layer needs to play in on the top_in event, and fade out on the top_out.

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.