GIF Text on Hover

Look Demo

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);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;


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.


No notes.