Hover effects are a great way to encourage interaction on your site, and thanks to CSS, they are super easy to create in Squarespace! This tutorial will teach you how.
– – –
Brand new to CSS for Squarespace? Check out my free training → https://insidethesquare.co/learn
– – –
In this video, you’ll learn how to create your own hover effects for Squarespace.
I’ll show you how to create a basic hover code that changes a button color on a hover, adds a filter to an image on a hover, and how to use item hierarchy to create a hover effect for list items.
I am using version 7.1 in this tutorial, but the code concept works for older versions too.
Here are the codes from this tutorial.
Change a standard button background color on a hover:
.sqs-block-button-element:hover{
background-color: red!important
}
Add a filter to an image on a hover:
.sqs-block-image:hover {
filter: grayscale(1)
}
Change a list item button color on a list item hover:
.list-item:hover .list-item-content__button {
background-color: red!important
}
– – –
🔗 Related Links 🔗
More Squarespace hover effect tutorials: https://insidethesquare.co/hover-effects
Creating borders with code: https://insidethesquare.co/borders
Learn about color codes: https://insidethesquare.co/colors
Squarespace Fluid Engine: https://insidethesquare.co/fluid
– – –
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
