Hover Animations - Text Reveal.

Create hover animations to hide an image and reveal text on hover

Here's how it is done

1. In Squarespace edit mode create a Text Block. Now create an Image Block and drag it over the top of your Text Block.
2. Select your image block and click the SquareKicker icon.

TIP: You can toggle Squarespace Grid on and off with the 'G' key to ensure your blocks 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.