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.

Tip

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

transform: scale(1.2);


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.