How to create site title hover effects in Squarespace

Jan 16

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Make the title or logo on your Squarespace website even more awesome with hover effects!

In this tutorial, you’ll learn how to create a logo that grows, how to add a highlight to site title text, how to change the color of the title on a hover, and we’ll play around with some fun filters that will create a grayscale to full color image and add a shadow too.

If this is your first time using CSS for Squarespace awesome! I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn

Video tutorial

Code Example

Here are the codes from this tutorial. Be sure to adjust the values in bold to make this work for your own unique website design. Feel free to remove the transition aspect of the code; it creates a smoother change but is entirely optional!

(01:30) Logo / Title That Grows

.header-title {
transform: scale(.8);
transition: 1s transform
}

.header-title:hover {
transform: scale(1)
}

(02:39) Logo / Title Shadow

.header-title:hover {
filter: drop-shadow(0 5px 10px #aaa)
}

(03:44) Grey to Color Logo Change

Without opacity change:
.header-title {
filter: grayscale(1);
transition: 1s all
}
.header-title:hover {
filter: grayscale(0);
transition: 1s all
}
With opacity change:
.header-title {
filter: grayscale(1);
opacity: .5;
transition: 1s all
}
.header-title:hover {
filter: grayscale(0);
opacity: 1;
transition: 1s all
}