Hover effects are one of my FAVORITE things to create for Squarespace, and I’m so excited to share these new ones with you! 🙌

In this tutorial, you’ll learn how to use custom CSS (Cascading Style Sheet) code to create unique style changes that will happen when someone hovers their cursor over a project thumbnail image on your Squarespace.

We’ll create text effects, and image filter ideas that you can customize to make your portfolio grid uniquely yours.✨

Here is a step-by-step video showing you how the codes work. When you’re ready to give it a try, you’ll find the custom css from the tutorial below!

⌨️ Here are the codes from this tutorial. To add them to your site, navigate to Design and then select Custom CSS.

/* background gradient */

.portfolio-overlay{background:linear-gradient(to bottom, #fff, rgba(0,0,0,0))!important}

/* make portfolio title visible at all times */

.portfolio-text{opacity:100%!important}

/* zoom title */

.portfolio-text{opacity:100%!important; transform:scale(.75); transition: all 2s!important}

.grid-item:hover .portfolio-text{transform:scale(1); transition: all 2s}

/* gray to color */

.grid-item .grid-image{filter:grayscale(1)}

.grid-item:hover .grid-image{filter:grayscale(0)}

.portfolio-overlay{background:linear-gradient(to bottom, #fff, rgba(0,0,0,0))!important}

/* color to gray */

.grid-item:hover .grid-image{filter:grayscale(1)}

.portfolio-overlay{background:linear-gradient(to bottom, #fff, rgba(0,0,0,0))!important; opacity:.8}

Custom Code Tips

To add the code to your site, navigate to Design and then select Custom CSS. Here you can paste your newly updated code.

If you want to change the style of an individual portfolio, add it to the page header code injection. Click on the gear icon next to the portfolio title, and under the advanced option, paste your code between two style brackets. Check out this tutorial for more information: insidethesquare.co/squarespace-tutorials/single-page

If you liked this tutorial, you’ll love these! ❤️ I have older tutorials with more info on portfolios in Squarespace. Here are links to those if you want to check them out:

How to show a project title on mobile

WATCH THE TUTORIAL → 

Learn about the differences between a Squarespace blog and a Squarespace portfolio:
WATCH THE VIDEO →