3D Hover Effect

3D Hover Effect is available in Section and Column in Elementor.

Find the “3D Hover Effect” option in Section

In the section, click on the middle icon among the 3 icons to edit the section options. See below image:

Now in Elementor’s main panel (left side), click on “Style” tab from the top. See below image:

 

Find the “3D Hover Effect” tab in this section. Click on the tab and enable this module. See below image:

 

 

Find the “3D Hover Effect” option in Column

In the section, click on the column icon to edit the column options. See below image:

Now in Elementor’s main panel (left side), click on “Style” tab from the top. See below image:

 

Find the “3D Hover Effect” tab in this section. Click on the tab and enable this module. See below image:

 

 

Create 3D Hover Effect

Before going to the 3D Hover Effect options, you need to upload an image in the section/column background.

 

Adjust the image background display with the Position, Attachment, Repeat, and Size options underneath the image. If your section/column’s height is not enough, increase the top and bottom padding in the “Advanced” tab settings.

Now go to the “3D Hover Effect” tab and enable this module. You will see various options to control the 3D Hover Effect.

 

 

X-Axis:

This option controls the 3D hover effect of the Left and Right (horizontal direction) side. If you don’t want the Left and Right side effect, you can disable this option. By default, this option is enabled.

Y-Axis:

This option controls the 3D hover effect of the Top and Bottom (vertical direction) side. If you don’t want theTop and Bottom side effect, you can disable this option. By default, this option is enabled.

Scale:

Scale option determines the axis’s depth. After enabling this option, you will get another field named “Scale Value” where you can set your desired value. The higher value is for more depth of the axis. By default value is 1. An excess value will result in a bad user experience. So keep this value low, so that your user can get a good user experience.

Keep Floating:

This option will keep the last state position when a user will move the mouse away from this section/column.

 

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback