How to create frosted glass effect for summary blocks in Squarespace

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

This tutorial will show you how to create a frosted glass hover effect for summary blocks in your Squarespace site.

A few important things to note before you copy and paste this into your own site:

→ Be sure to edit the code to suit your own site style, trying different margins, colors, height and width values, and blur values.

→ This code is specifically for summary blocks that pull data from blogs and other sources in your Squarespace site.

→ You can apply this to a single image by using its block id. There is a free chrome extension that I use to easily grab that info, available here. Please note that I am not affiliated with that company or extension in anyway - I just use it myself!

→ Mobile devices don't have a cursor so hover effects won’t work on them! The hover effect version of this code only applies the look to any screen larger than 640px.

Here is the non-hover effect code from this tutorial.
The parts you can customize are in bold below:

.summary-content {
position: relative; z-index:99!important; background: inherit;
transform:translatey(-160%);
padding:1rem;
width: 90%; margin-left:auto; margin-right:auto;
height: 200px;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px); }

And here is the hover effect version:

.summary-content {
position: relative; z-index:99!important; background: inherit;
transform:translatey(-160%);
padding:1rem;
width: 90%; margin-left:auto; margin-right:auto;
height: 200px;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px); transition:2s; }

@media only screen and (min-width:640px){ .summary-item:hover .summary-content{ backdrop-filter: blur(8px); height:220px; transition:2s;}}