Hover Animations - Change Image.

Use SquareKicker to ‘reveal’ an alternative image on hover

Changing an image on hover can create a dramatic display and is a great way to increases the 'dwell time' of a visitor to your site, great for SEO and boosting your credibility with google.

It's also a creative way of displaying more of your product without over cluttering pages.

Here's how it's done.

In Squarespace edit mode, upload both images to Image Blocks. Ensure they are the same size and same design.

1. Drag your first image over the top of your second image.
2. Select the top image and click the SquareKicker icon.

TIP: You can toggle Squarespace Grid on and off with the 'G' key this helps to ensure the images are perfectly aligned.

1. In the SquareKicker tools window select the Effects tab.
2. Click the yellow lightning bolt in the top right corner. The lighting bolt will turn blue indicating you are in hover mode. Any changes made in this window will be applied when the cursor hovers over the image block.
3. Drag the opacity down to 0%.
4. You can adjust the speed of your Hover transitions using the Ease slider at the top of the SquareKicker Design panel. Sliding left will speed up the transition and sliding right will slow it down.
   

TIP: In the SquareKicker Effects window click on the Lightening Bolt in the top right. This will activate Hover Mode. All the changes made here will only effect the selected Image on Hover.