Invert Header On Hover

---

Look Demo

Invert the header – along with links, buttons, and all – when being hovered. This plugin uses css editor and works with Squarespace 7.0 (Brine template family).

---

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.

// Invert Header On Hover //

.Header {
  transition: filter .5s ease-in-out;
  -webkit-filter:invert(0%) !important;
  filter:invert(0%) !important;
}

.Header:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter:invert(100%) !important;
  filter:invert(100%) !important;
}

---

Customize

You can adjust the transition .5 seconds to make the fade slower or quick on hover.

This plugin is recommended for headers that use a black, white, and grey color palette. Any other colors used in the header will invert.

---