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.
