Zoom layer on hover

If you would like to have a layer, which is zoomed in while you have a mouse cursor over it and zoomed out, while you don't, you need to follow this tutorial.

Step 1

The zoomed in state should be actually how you are putting the layer down. So this is the "big version".

Step 2

At the layer window → Animation In, choose "Fade", and change the Opacity to 100%. (Basically you removed the fading animation, as you won't need that.) Then set the Scale X and Y values to be smaller, like 50%. This will be the zoomed out, small version's size.

Step 3

At the layer window → Animation Out, do the exact same. Choose "Fade" and change the Opacity to 100%. Then change the Scale - X and Y to the same as before, in my example 50%.

Step 4

At the layer window → AnimationEventsPlays In When write LayerMouseEnter, and to the Plays Out When you should write LayerMouseLeave. Lastly turn on the Repeatable option, and you are done.


At Step 1 if you want to, you can use this CSS code to scale your image outside its container:

transform: scale(1.2);

which could be inserted into the Style tab → press "More" → CSS field.

You can modify the 1.2 value, but you should note, that your image cannot be bigger from your slide.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.