Cursor Hover
The Cursor Hover Effect Extension enables smooth, real-time animations that respond to mouse movement. It can be applied to any element, including buttons, images, and containers, enhancing the interactivity and modern feel of your site.
Effect
Use Cases for Cursor Hover Effect
Hero Section Highlight
Product Images
Pricing Tables & Plan Cards
Testimonial Cards & Client Photos
Cursor Hover Effect - Demo 01
Cursor Hover Effect - Demo 02
Cursor Hover Effect - Demo 03
Siyantika
Glory
Siyantika
Glory
Siyantika
Glory
Siyantika
Glory
Have question? we’re here to help
Documentation & Inspiration
Become a part of our community
Didn’t find Your Answer?
What is the Cursor Hover Effect Extension used for?
The Cursor Hover Effect Extension enables users to add interactive hover animations to any element within Elementor. When a user moves the cursor over an element, styled text appears dynamically with customizable colors, borders, and design effects. This enhances the website’s responsiveness and visual engagement.
Can the animation be previewed while editing in Elementor?
Yes. To preview the animation directly within the Elementor editor, set the “Enable On Editor” option to “Yes.” When this option is turned off, the animation will remain active on the live website but will not display in the editor during design time.
Are font styles customizable for the hover text?
Absolutely. The extension provides comprehensive typography controls. It allows customization of the font family, size, weight, text transform, style, decoration, line height, letter spacing, and word spacing. All of these options can be configured directly within the widget’s settings.
Can background gradients and borders be applied to the hover effect?
Yes. A full range of visual styling options is available. Background colors and gradient angles can be customized. Various border styles, such as solid, double, dotted, dashed, and groove, are supported. Additionally, the border width and radius can be adjusted to achieve the desired design.