If you have ever wondered how to make a 3D animation, visible by moving the mouse, stay with us until the end of this text, and find out.

We'll start making our animations by adding an image widget, we'll add three images with mountains to give us a 3D effect.

1.Adding the first image

The first thing you need to do is select the first image, which is the first mountain layer, in Elementor set the image width to 100%, then in Advanced, in the Custom Positioning section, set the image to absolute position. The next thing you need to do is set the horizontal and vertical offset to VW, this helps us fit our design to the width of the screen. The next thing you need to do is set the vertical orientation to 25vw, and the horizontal orientation to 2vw.

2.Adding another image

Then you duplicate your image and place it on another layer, in the Advanced setting under Custom Positioning change the offset numbers, delete the horizontal number and leave the vertical number as it is.

3. Adding a third image

Repeat the same step, duplicate the image select your third layer and in the Advanced cropping under Custom Positioning set the width to Custom, then the units to VW, and the Custome Width to 120 vw. The next thing you need to do is set the offset to -15vw in the horizontal orientation, and set the offset to 10vw in the vertical orientation.

Now you will add your animation, by turning on Mouse Effects in Motion Effects, click on Mouse Track and leave the default settings. Change the 3D Tilt to the opposite side and set the speed to 1.

Check if the animation is working by hovering over the screen.

In order to manage all the layers more easily, you should access the navigator by right-clicking and selecting Navigator, then select another image. In Motion Effects, turn on Mouse Effects, then click Mouse Track and change the direction of movement to straight and speed to 0.5, and set the speed of 3D Tilt to 2.

And the last picture, in Motion Effects turn on Mouse Effects, then on Mouse Track change the direction of movement to direct, and leave the speed as it is. In 3D Tilt, set the speed to 1.

Remember, this hover effect doesn't work on phones and tablets, because they don't use a mouse.

Check if you succeeded by moving your mouse across the screen.

If you liked this short tutorial on creating animations, please visit our blog for more interesting ideas.

Text and images taken from sources: youtube