How can I add inline text on hover in Webflow?

To add inline text on hover in Webflow, you’ll use interactions and a hidden text element that becomes visible when its parent or sibling is hovered.

1. Add the Base Text Element

• Drag a Text Span into a Text Block or Paragraph where you want the hover effect.
• Select the Span, and apply a custom class (e.g., hover-span).
• Add your visible base text (e.g., “More”).

2. Add the Inline Hover Text

• While still inside the same text block, insert another Text Span immediately after the base span.
• Give it a class name like inline-hover-text.
• Type the text you want to reveal on hover (e.g., “ – more info”).
• Set this span’s display to inline and its opacity to 0 in the Style panel.
• Select the inline-hover-text class, click the plus symbol (+) next to States, then choose Hover and keep styling unchanged (we’ll animate it later).

3. Create the Hover Animation

• Open the Interactions panel (lightning icon).
• With the parent text element (or a wrapper div) selected, click + interaction and choose Mouse Hover.
• On Hover In:
• Add an animation.
• Use Target: inline-hover-text.
• Set Opacity to 100% and optionally add Move → X px or other style changes for animation.
• On Hover Out:
• Reverse the animation by setting Opacity back to 0%.

4. Control Inline Layout and Spacing

• Ensure both text spans are inline and don’t break to a new line.
• Adjust spacing using margin-left on the inline-hover-text span if needed, instead of spaces in the text content.

Summary

To show inline hover text in Webflow, use two inline text spans inside a text block—one always visible, one hidden—and apply a hover interaction to fade in the hidden span. Keep both spans inline to retain flow within a paragraph.