YouTubeBlogHome

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:

Download

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

CHANGE THIS PART {
 background-image: url('');
 background-size: cover;
 background-repeat: no-repeat;
 transition: .5s;
}

CHANGE THIS PART:hover {
 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

.Header-branding-logo

Adirondack, Avenue

.logo

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

Aubrey, Aviator, Encore

.site-title-image

Bedford Family - Anya, Bedford, Bryant, Hayden

#logoImage

Five

#banner

Flatiron, Forte, Supply

#logo

Galapagos

.site-logo-image

Ishimoto

.logo-image .logo img

Momentum

#logo .logo-image img

Montauk Family - Julia, Kent, Montauk, Om

.logo-image .logo img

Native

#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

Wells

#logo .logo.image img

Wexley

.logo-image .logo img

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

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