How to reveal text on hover

SquareKicker gives you the ability to create hover animations to reveal a text block or hide an image on hover with this simple no-code builder. Try combining other hover animation designs such as background blur, scale and more effects to unleash your hover creativity.

Transcript

 For this example, I have three images and three different text blocks. Underneath these images, I have text that shows when I hover on the image. To create this, I first created an image and drag with fluid engine right over the top of my text block. I then click on the SquareKicker icon to open up my tools, and as I head down I see effects when it open effects, I have Opacity, Scale and Blur.

When I click on the lightning bolt called Hover Mode, this activates what will happen when I hover on this block. So when I hover on this block, I want it to disappear, so I drag the opacity down to 0%. Now as I toggle hover mode on and off, you can see that this is what will happen when I hover on the image. But I want this transition to be slower.

So I'm going to type in 500 milliseconds, which is half a second. So now when I hover on the image, it disappears revealing my text.

Here's a different example that when I hover on a text block, it reveals itself and also shows a background color overlaying the image.

So this time I will take my text block and I'll drop it on top of an image block, and head into my SquareKicker tools and go to background. I also see a hover mode. When I switch this on, this is what will happen to the background of my text text block when I hover on the image. I'm gonna bring the background opacity down to 75%.

Now as I toggle with this on and off, you can see what will happen when I hover on this text block. But the next thing I want to do is to reveal my text. So now I head back into effects and bring the opacity down to 0%, then click on hover mode. And when I hover on the text block, I want my text to reveal.

Don't forget to subscribe and get updated on new SquareKicker tutorials for Squarespace.

Previous
Previous

Change image on hover in Squarespace 7.1 websites

Next
Next

Change the font and style of one word in Squarespace