How to customize the portfolio project thumbnails in Squarespace

Jul 11

This tutorial was recorded in Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this tutorial, you’ll learn how to use custom CSS (Cascading Style Sheet) code to change the style of your project thumbnail images in Squarespace. You’ll be able to give your portfolio that extra pizzazz by tweaking the shape, borders, shadows, and even adding cool hover effects to your images. It's a digital makeover for your projects that will help you create a gorgeous site that is 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.

/* round images */
.grid-item .grid-image{border-radius:50%!important}
/* parallelogram */
.grid-item .grid-image{clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)}
/* border - wont work with clip path*/
.grid-item .grid-image, .portfolio-overlay{border-radius:50%!important; border:5px solid red}
/*shadow*/
.grid-item .grid-image, .portfolio-overlay{border-radius:50%!important; border:5px solid red; box-shadow: 5px 5px 15px rgba(0,0,0,0.2)}
.portfolio-overlay{ box-shadow:inset 5px 5px 15px rgba(0,0,0,0.2)}
/*hover effect*/
.grid-item:hover .grid-image, .grid-item:hover .portfolio-overlay{ border:5px solid blue; }
.portfolio-overlay{ box-shadow:inset 5px 5px 15px rgba(0,0,0,0.2)}
/* make portfolio title visible at all times */
.portfolio-text{opacity:100%!important}

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

Try more shapes with this free clip path generator! Insidethesquare.co is not affiliated with this website or it's creators; just a fan. bennettfeely.com/clippy

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: