Text Hover Image

Before setting up the Text Hover Image widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Text Hover Image widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Text Hover Image feature displays an image on text hover, enhancing engagement and customization. The Text Hover Image feature displays an image when users hover over text, enhancing interactivity. 

Key Use Cases for the Social Icons Widget in Elementor:

• Use the Text Hover Image widget to showcase product previews and portfolio items interactively.
• Add hover effects to display additional information without cluttering the page.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Text Hover Image Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Text Hover Image Widget in the list.
• Toggle it on to enable the widget.

Now, the Text Hover Image Widget is ready to use!

How to Add the Text Hover Image Widget in Elementor:

• Open the page where you want to add the Text Hover Image widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Text Hover Image Widget.”
• Drag the widget to your desired section.

The Text Hover Image widget is now ready for customization!

How to Configure the Text Hover Image Widget in Animation Addons:

• In the Elementor panel, search for the “Text Hover Image Widget.”
• Drag and drop the widget into your desired section.
• Customize the image and text settings using the available options in the Elementor panel.

Your Text Hover Image widget is now ready to use! You can personalize the settings to achieve the desired hover effect and style.

Configuring Text Hover Image Widget in Animation Addons: A Step-by-Step Guide

The Text Hover Image Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to fine-tune your image and hover effects.

In the Text Hover Image widget, you will only find one section under the Content tab.

Content Settings

In the Content section of the Text Hover Image widget, you will find the following options:

Content

• Before Hover Text: Set the text displayed before the hover effect.
• Hover Text: Define the text that appears when the user hovers over the element.
• After Hover Text: Specify the text displayed after the hover action.

• Hover Image: Upload the image that will appear on hover.
• HTML Tag: Choose the appropriate HTML tag for the text (e.g., <h1>, <p>, <span>).
• Link: Add a URL for the text or image to link to.

Alignment: Control the alignment of the text and image (left, center, right).

These options allow you to customize the hover effect and ensure smooth integration with your site’s design.

Style Settings

The Style section is divided into two parts: Style and Image. Let’s explore how to work with and customize these settings.

Style

In the Style section of the Text Hover Image widget, you can customize the following settings:

• Text Color: Set the color of the text before hover.
• Hover Color: Define the text color when the element is hovered.
• Typography: Adjust font family, size, weight, and other typography settings for the text.
• Text Stroke: Apply a stroke (outline) around the text for emphasis.
• Text Shadow: Add a shadow effect to the text for depth and visual appeal.
• Blend Mode: Control how the text and background interact visually with blend mode options.
• Hover Text: Customize the appearance of the text during the hover effect.
• Hover Text Color: Set the text color specifically when the hover effect is active.

These options provide flexibility in styling the text and hover effects to ensure seamless integration with the website’s overall design.

Image

In the Image section of the Text Hover Image widget, you can customize the image’s width and height to fit your design. 

The Position Top and Position Left settings allow you to adjust the image’s vertical and horizontal placement, ensuring precise control over its positioning during the hover effect. 

These options help integrate the image seamlessly into your layout.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Text Hover Image widget in Elementor to effectively customize and display interactive images on your website.

If you need further assistance, feel free to reach out to our support team!