How to create hover effects in Squarespace

content block

Sep 6

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.

/* 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
}

hover effects