How to create site title hover effects in Squarespace
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
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
}
(04:14) Inverted Logo Colors
.header-title:hover a{
filter:invert(1);
transition: 1s all
}
(05:14) Change Title Color
.header-title:hover {
color: red!important;
transition: 1s all
}
(06:05) Logo / Title Highlight
Solid Color:
.header-title:hover {
background: yellow
}