How to create hover effects in Squarespace
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 is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes
Ever wonder how those cool buttons and images on websites change color or reveal hidden details when you hover over them? It's all thanks to the magic of hover effects!
These interactive elements are a fun and easy way to add a touch of personality and engagement to your Squarespace site.
In this tutorial, I'll break down the basics of Squarespace hover effects with custom CSS.
With step-by-step instructions, you’ll learn how to create different types of hover effects for your buttons and images, making your website even more dynamic and fun to interact with!
We'll be changing a button color on a hover, creating a list item image filter hover effect, and adjusting the transition time using custom CSS.
The codes from this tutorial are below, but make sure you watch the video to understand how they work so you can customize them for your own unique website design.
Squarespace Tutorial
Here are some helpful timestamps for the video above:
00:17 Creating a Basic Hover Effect for Buttons
00:58 Handling Squarespace-Specific Hover Nuances
01:31 Dealing with Site-Wide Animations
02:23 Advanced Hover Effects for Images
03:58 Revealing Images with Hover Effects
06:33 Final Tips and Recap
Code Example
Here are the codes used in this tutorial.
You’ll find more selectors and style plugins like this inside the Squarespace CSS cheat shet, available at insidethesquare.co/css
Be sure to edit the values so they match the style of your own website!
/* change button color */
.sqs-block-button-element:hover{
background: red!important;
opacity: 1!important
}
/* list item image filter */
.list-item img{
filter: grayscale (1)
}
.list-item:hover img{
filter: grayscale (0)
}
/* hide image on hover with slower transition*/
#block-123:hover{
opacity: 1;
transition: all 2s
}If you found this tutorial helpful, you can Buy Me A Coffee to say thanks!
Your contribution will help me keep this content free for our Squarespace community.
Related Content
#️⃣ Block ID Chrome extension: https://insidethesquare.co/chromeext
📚 Squarespace CSS Resources: https://insidethesquare.co/css
🍿 Free Squarespace tutorials: https://insidethesquare.co/tutorials
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
