Squarespace hover effects: image overlay on hover

Image overlay on hover

Create captivating images and movement on your site by adding a simple pop of color with a transparent overlay that appears on hover. Don’t settle for static images on your Squarespace site - add some fun animations that draw the eye and give your page a vibrant boost. SquareKicker design and animation extension simplifies these customizations. It only takes a few clicks to apply a colorful image overlay. You can customize how your images look and move. Create a custom color and play with the opacity setting to reveal your image.

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.

How do you make an image overlay hover effect?

With just a few clicks, you can add a range of custom hover effects to any of the images on your site. 

1. Open SquareKicker on the image block 

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

3. With hover mode activated, apply changes under the Design tab

4. Select overlay, and create a custom color or choose a color from your palette

5. Change the opacity of your color to subtly reveal the image underneath

One of the no-code hover effects you can achieve is an image overlay: when the mouse cursor moves over the image a custom color will appear. Make your images pop by adding some fun color effects on hover. 

An image hover overlay effect animates the images on your site so your visitors will be more engaged with the content you’ve spent time creating.

Add more colors to your Squarespace color palette 

You can use the SquareKicker color picker to seamlessly integrate designs across your site, including on hover effects. When you choose a color for your image overlay, you can create a custom, one-off color, or open the color palette and modify the opacity of an existing color to create a variation. 

1. Open SquareKicker on the image block 

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

3. Select Overlay and open the color palette 

4. Select an existing color in your palette and with this selected, click + to create a new color

5. This will open the color picker with the selected color as your starting place

6. Drag down the opacity to around 50% 

7. This color variation will be added to your SquareKicker color palette

Did you read our color picker blog post? Learn how to add 24 more colors to your Squarespace color palette, and create custom colors for unique elements on your site.

Other image hover effects for your Squarespace site 

You can apply a range of unique customizations to your images with SquareKicker, to make your Squarespace site distinctive and on-brand. Get inspired by experimenting with scale, blur, borders, shadows, position, and more. Choose whether these customizations will be revealed or hidden on hover - the possibilities are endless!