CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Text Background Effects

A collection of text backgrounds animated on hover.

Copy: View demo


All components are built upon the CodyHouse Framework.

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:

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.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.