Squarespace hover effects: image reveal on hover

Image reveal on hover

Did you know you can use a hover effect to arrange how images appear on your Squarespace site? You can layer images on top of one another to create a dynamic way to engage with your content. Use image reveal on hover to show different aspects of your product or to show it in different contexts. The image reveal hover effect swaps the image visible to the visitor - upload and style two images and then choose the order these images are displayed in. With hover, some content can be hidden. Keep reading to find out how to swap an image on hover on your Squarespace site.

How do I show another image on hover?

Have you got multiple images that you want to share in a creative and engaging way with your site’s visitors? Use hover effects to change the images visible to your visitors and at the same time add a fun, interactive element to your Squarespace site.

1. Upload your images to two image blocks and style the images in the same way

2. Drag one image over the top of the other image

3. Open SquareKicker on the top image block 

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

5. Open Effects and lower the opacity to 0%

Watch our in-depth 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.

Advantages to using hover effects on your Squarespace site 

• Use hover animations to increase dwell time on your site. With more engaging, animated content on your Squarespace site, you can increase the length of time a visitor spends on your page before they return to search results.

• Grab your visitors’ attention. As your visitors move around the site, hover effects will create motion and draw the eye to specific aspects of your site. Use hover effects to highlight key areas such as products or call to action buttons.

• Include more content by hiding some images and revealing them only on hover. Use this as a way to showcase a before and after, different aspects of your product, or close-ups.

• Keep your site clean and navigable. Declutter and organise your content in an intentional way. With hover effects, not all content needs to be displayed at the same time and you can influence how your visitors navigate your site and encounter different pieces of content.