How to focus blurry text on a hover in Squarespace

Jan 19

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 use text shadow effects to create blurry text that will focus on a hover.

I saw this on a quiz site where the answer was shown only when you hovered over it; it was cool enough that I wanted to figure out how to do it, and thought you might too!

Make sure you use the right “code name” for your text type; In this tutorial, I use Heading 2 text (h2) text, active links (a), and paragraph text (p).

Also, be sure to customize the font itself using some CSS! I have a few examples of codes for color, bold font styles, but get creative here. 😄

Download Transcript

Here are the Squarespace codes from this Tutorial:

Navigate to your custom CSS ( Design → Custom CSS ) and paste this code below to create the blur/focus effect for your H2 text:

h2 {
color: transparent!important;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
transition:1s;
}
h2:hover {
color: #000!important;
text-shadow: none;
transition:1s;
}