In this tutorial, I will be showing how to create those fancy 3D image hover mouse effects using Elementor in just a few steps. At the end of the article, you will be able to do something like this one:
Step 1: We will begin this tutorial by adding a new section.
Step 2: Choose your desired column structure. Colum structures dictate how your web page looks. For this tutorial, I shall choose the first one. But feel free to choose any column structure that you want.
Step 3: Drag the “Image” widget the sidebar of your Elementor editor on to the section that we’ve just created.
Step 4: Choose your desired image. In this tutorial, I’ll use a cute little yellow car.
Step 5: Go to the Advanced Tab of the Image widget.
Step 6: Select the Motion effects section.
Step 7: On the Mouse Effect option, you can set the animation on Mouse Track. Set the direction to Direct or Opposite and your desired Speed.
Doing so will create this animation effect:
Modifying the 3D tilt property will create the effect I’ve shown earlier.
Isn’t this animation look cool?
Thanks for Reaching This Far! 🙂
I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!
If you have more concerns or have encountered other issues, let us know in the comments section!