How to create frosted glass effect for images in Squarespace

Nov 17

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 poster images in your Squarespace site.

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

→ This tutorial is for a poster image block layout only available in classic editor. Classic editor page sections, blog posts, events, and additional product details use this image block style, but Fluid Engine sections do not.

→ You will still be able to edit the poster image text after applying the code.

→ 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.

After you watch the step-by-step tutorial video, the codes you can use on your own site are below!

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

Download Transcript

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

.design-layout-poster .image-card-wrapper {
background: inherit;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
height: 80%; width: 80%;
margin:auto!important; }

And here are the codes for the hover effect:

.design-layout-poster .image-card-wrapper {opacity: .3; background: inherit; background-color: rgba(255, 255, 255, .3); backdrop-filter: blur(5px); transition:2s; height: 80%; width: 80%; margin: auto!important; }
.design-layout-poster:hover .image-card-wrapper{ opacity: 1}
@media only screen and (max-width:640px){.design-layout-poster .image-card-wrapper {opacity:1}}