How to Make an Animated Logo on Hover in Squarespace

I got a question recently about animating a logo on hover in Squarespace - so I made a video about it.

If you want to download the logo that I used in the video to follow along, you can grab that here.

If you haven't already got Photoshop, you can get that here!

To apply this to Squarespace 7 templates you will need to replace the logo class ID that is used in the video.

background-image: url('');
background-size: cover;
background-repeat: no-repeat;
transition: .5s;

background-image: url('');
transition: .5s;

It's important to make sure that you don't remove :hover from the second part of the CSS.

You can grab the ID for your template below

Brine & Farro Families - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Farro, Feed, Foster, Greenwich, Hatch, Haute, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West


Adirondack, Avenue


These templates also need a site title to be displayed on the mobile site.

Aubrey, Aviator, Encore


Bedford Family - Anya, Bedford, Bryant, Hayden




Flatiron, Forte, Supply





.logo-image .logo img


#logo .logo-image img

Montauk Family - Julia, Kent, Montauk, Om

.logo-image .logo img


#header h1.logo.image .placed-logo-image img

Pacific Family - Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

#logoImage img

Skye Family - Foundry, Indigo, Ready, Skye, Tudor

.logo-image img

Tremont Family - Camino, Carson, Henson, Tremont

.site-branding h1 img


#logo .logo.image img


.logo-image .logo img

York Family- Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

.logo-image img, .mobile-logo-image img