GIF Animated Text on Hover

---

Description

Fill in any header text with an animated GIF instead of solid color when hovered! This plugin uses css editor and works with all template families.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Hover GIF Text //

h1:hover {
  background: url(GIF-URL-HERE.gif) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  }

---

Customize

Change the h1 text property to the one you’d like to target. This can be either h1, h2, or h3.

Add in your animated GIF by replacing GIF-URL-HERE.gif with your own link. Font family, style, and size can all be adjusted in the Site Styles settings.

---