How to create list item hover effects in Squarespace

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

List sections are a great way to organize content on your site, and this tutorial will teach you how to make them even cooler!

With the codes below, you can create two different list item hover effects:

→ The first will reveal the text on top of a gradient background at the bottom of the list item on a hover.

→ The second will make it look like the image is rotating to reveal the text on the other side.

Both of these codes are below, but be sure to watch the video before you use them because there are important parts that you will want to change!

Before we get into the codes, make sure your list section is set up as follows:

→ Design: Simple List

→ Size & Space: Position set to Equal Height

Here are the codes:

Text content reveal over a gradient:

.list-item-content {
margin-top:-58%;
background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.5) 25%, #000 75%);
padding: 1rem;
transition: all 1s;
z-index:99;
opacity:0
}

.list-item:hover .list-item-content {
transition: all 1s;
opacity:1
}
.list-item-content *{
color:#FFF!important
}

.list-item-media {
transition: all 1s;
filter:grayscale(1);
}
.list-item:hover .list-item-media {
transition: all 1s;
filter:grayscale(0)!important;
}

@media only screen and(max-width:640px){
.list-item-content {
opacity:1!important
}
.list-item-media{
filter:grayscale(0)!important;
}
}

Here is the code for the image rotation with a full-color background. Remember this one is only on desktop and the list section will look the same on mobile!

@media only screen and(min-width:640px){
.list-item-content {
transform:rotateY(180deg);
transition: all 1s;
margin-top:-100%;
padding-bottom:30%!important;
padding:1rem;
opacity:0;
}
.list-item:hover  .list-item-content {
transition: all 1s;
transform:rotateY(0deg);
opacity:1;
}
.list-item-media img{
transform:rotateY(0deg);
transition: all 1s;
}
.list-item:hover  .list-item-media img{
transition: all 1s;
transform:rotateY(180deg);
opacity:0
}
.list-item:hover  .list-item-media{
transition: all 1s;
transform:rotateY(180deg);
background-color:#50bdb8
}
}