Squarespace hover effects: reveal text on hover

Add hover effects to text in Squarespace

Add text to the images on your Squarespace site and make it interactive and engaging with simple customizations using a hover effect. SquareKicker empowers you to create easy hover animations that reveal elements of the page as your visitor navigates through the content. Transform your Squarespace site with dynamic, animated content that’s fully customizable.

Apply a range of eye-catching edits to your image and text blocks and then combine these elements using hover mode to add some wow factor to the images on your Squarespace site.

Choose if your text will be completely hidden and revealed on hover, or if a creative text block background will make your images more compelling.

How do you make text appear when hovering over an image on your Squarespace site?

Get creative and change how your visitors engage with the text blocks on your site. Reveal text on hover by placing your text block behind your image block and use SquareKicker to animate this effect with just a few clicks.

1. Arrange an image block over a text block

2. Open SquareKicker on the image block, and select Effects

3. Navigate to the lightning bolt in the top right corner - it will turn blue to indicate that SquareKicker is in hover mode

4. Lower the opacity to about 15%

Watch our reveal text on hover tutorial for more details about creating this dramatic hover effect on your Squarespace website.

Customize your Squarespace site with hover

Have you created some custom hover designs for your site yet? Apply a range of hover effects to your Squarespace site for a powerful, interactive experience. Your visitors have landed on your site -  keep them entertained as they explore your content!

Hover effects are animations that appear when you move (or hover) your mouse cursor over an image or another element on the page, such as a button.

Create dynamic movement on your site and engage your visitors with elegant hover effects. Using the SquareKicker design extension you can apply a wide range of bespoke hover animations without any custom code snippets.

Be sure to read our series of posts that cover all the hover possibilities you can achieve with SquareKicker.

Try other text block hover effects in Squarespace

Spend time exploring the different design options available in hover mode with SquareKicker. There are many different effects you can create and customizations you can apply to your text to make it stand out. Another text hover effect you can try is simply a reverse of the text reveal on hover effect. Arrange your text block on top of your image block and change how this appears on hover.

1. Arrange a text block on top of an image block

2. Open SquareKicker on the image block 

3. Select effects and lower the opacity to about 40%

4. Navigate to the lightning bolt in the top right corner - it will turn blue to indicate that SquareKicker is in hover mode

5. Now raise the opacity to 100%

Want to spend some time styling your text in a distinctive way? With SquareKicker you can fully customize the text on your Squarespace site. Change the font, background, border, position, or spacing of your text block. Add a shadow, or other effects such as opacity, scale, and blur. Let your imagination run free as you combine these text customizations with your images for a striking effect.