Summary Block Hover Effects

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

As great as the summary block feature is, the built in design can be pretty... well, boring!

In this tutorial we’ll use some custom code to change the look of summary blocks so they stand out on a hover.

The codes from this video are listed below, and yes, they will work in both version 7 & version 7.1!

Be sure to adjust things like colors and any other values so it looks amazing for your own site design.

---

Here are the codes from this tutorial:

Grayscale:

.summary-item:hover .summary-thumbnail{filter:grayscale(1)}

Border:

.summary-item:hover .{border: 1px solid pink}

Bold font:

.summary-item:hover * {font-weight:bold}

Shadow:

.summary-item:hover {box-shadow:5px 5px 15px #ddd}

Darker shadow:

.summary-item {box-shadow:5px 5px 15px #ddd} .summary-item:hover {box-shadow:5px 5px 15px #aaa}