Go to homepage

Projects /

Text Background Effects

A collection of text backgrounds animated on hover.

View Demo

How to

The Text Background Effects component is a collection of background-image animations that can be used to create text hover effects.

To add a background hover effect to a text element, add the text-bg-fx class to that element. You can then select a specific animation using one of the following classes:

  • text-bg-fx--scale-x: the background-image is a full-height gradient; on hover, reveal the background from left to right.
  • text-bg-fx--scale-y: the background-image is a full-height gradient; on hover, reveal the background from bottom to top.
  • text-bg-fx--underline: the background-image is a 2px line at the bottom of the text element; on hover, reveal the background from left to right.

When using the text-bg-fx--underline, you can add the additional text-bg-fx--text-shadow class to break the underline where it meets the descenders of characters like 'p' or 'q'. This will create some white space around those characters, improving text legibility.

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.