🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Text Background Effects

A collection of text backgrounds animated on hover.

Copy: View demo

Dependencies

All components are based on CodyFrame.

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.

✅ Project duplicated

✅ Project created

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