How to create site title hover effects in Squarespace / Site Logo Hover Effects Squarespace Tutorial

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
- - -
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:17 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
}
- - -
03:44 Grey to Color Logo Change - With opacity change:
.header-title {
filter: grayscale(1);
opacity: .5;
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 a {
color:Red!important;
transition: 1s all
}
- - -
06:05 Logo / Title Highlight:
.header-title:hover {
background: yellow
}
- - -
💌 Join my Squarespace email list: https://insidethesquare.co/email
❤️ Like this tutorial? Buy me a coffee to say thanks: https://buymeacoffee.com/insidethesquare
⭐️ Free Class on CSS for Squarespace: https://insidethesquare.co/learn
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
📑 Get access to my collection of CSS codes for Squarespace:
ttps://insidethesquare.co/css
🎨 Creating colors with code:
🔡 Free guide to font and text properties: https://insidethesquare.co/textguide
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

Видео How to create site title hover effects in Squarespace / Site Logo Hover Effects Squarespace Tutorial канала InsideTheSquare with Becca Harpain