Text Hover Effect

Bring your text to life! The Text Hover Effect widget allows you to add stunning interactive animations to your headings and paragraphs, making your site feel dynamic and modern.

This widget comes free with WPMozo Addons Lite. To use it, simply install and activate the free version of plugin.

Overview

Interactive elements are key to keeping visitors engaged. This widget transforms static text into an interactive experience. When a user hovers over the text, it triggers beautiful transitions like reveals, color shifts, or sliding animations.

How to use

• Search for “Text Hover Effect” in Elementor.
• Add your primary and secondary text (the text that appears on hover).
• Choose an animation style from the list of presets.
• Customize the speed, direction, and colors of the effect.

Content settings

• Primary Text: Enter the text you want to display in the normal state.
• Effect Type: Choose from several animation styles such as Reveal, Slide, and Zoom.
• Transition Time: Set the duration of the hover animation in seconds.

Style settings

Text styling

Define how your text appears before and during the hover effect.

• Normal State: Set the primary color, typography, and text shadow for the default state.
• Hover State: Choose the color and font settings that appear when the user hovers.
• Typography: Full control over font family, weight, and size for both states.

Effect customization

Style the visual elements of the animation (like lines or bars).

• Bar/Line Color: Choose the color for the animated decorative elements.
• Line Height: For certain effects, adjust the thickness of the decorative bar.
• Transition Duration: Set how long the animation takes to complete.

Layout and spacing

Position your animated text within its container.

• Alignment: Standard Left, Center, and Right alignment options.
• Responsive Controls: Set different alignments for mobile, tablet, and desktop views.