Change image on hover in Squarespace 7.1 websites
In this tutorial, we are going to look at how to change or ‘reveal’ an alternative image on hover in Squarespace 7.1 websites using SquareKicker's no-code plugin extension. You may want to use it to replace a thumbnail image or create a dramatic display for your visitors to interact with.
Changing an image on hover can be a great way to entice viewers by displaying more of your product without over cluttering pages. It also increases the 'dwell time' of a visitor to your site which is great for SEO and boosting your credibility with google.
1
Upload both images to Image Blocks. Ensure they are the same size and same design, in this example we have rounded the corner using the SquareKicker Border Tool.
2
Drag your first image over top of your second image. We find it easier to line them up if the Squarespace Grid is showing in Fluid Engine. To activate this press COMMAND / ALT + G
3
Once the images are completely overlapping, open SquareKicker on the top image and click Effects. Note - when images are overlapping you will not be able to click on the tools for the image underneath.
4
When you are in the Effects panel head to the top right corner and click on the Lightening Bolt symbol, this will activate Hover Mode. Now all the changes you make will only effect the selected Block on Hover.
5
Bring the Opacity down to zero by dragging the slider all the way to the left. You will see a blue dot appear next to the Opacity title indicating you now have an active Hover effect.
Tip - Change the speed of your Hover transitions using the Ease slider at the top of the Design panel. Sliding left will speed up the transition and sliding right will slow it down.
Tutorial Audio Transcript
Hi, this is Nick from SquareKicker, and in this video I'm gonna show you how you can change an image on Hover in Squarespace without using any code. All right, so the first thing I'm gonna do is open up a Squarespace site with SquareKicker installed, and you can see is I toggle the key G, I can turn the grid and fluid engine on and off.
So I'm gonna leave that on because that's gonna be important for later on. So what I want to do is make this image, when I hover on it, this image is gonna be revealed. And so the same thing applies to these images here. Now, to do that, I just have to click and hold, and then I drag this image to sit right on top of another image.
Now I can use fluid engine to actually resize it to make sure it's actually filling the entire image, so I can't actually see it. So that's actually quite, I. Now what's gonna happen is I want this image to disappear. When I hover on it, I can only change the hover state of the image I'm on. I can't change the state of the image behind it.
So I need to make sure whatever I do, it's gonna be to this image on top. So as I click and open up SquareKicker and I click down to Effects, now Effects is gonna have a few things. It's gonna have a opacity , scale and blur. So this becomes where I want to change this on hover. So I click on my hover state, which is my lightning bolt, and now the whole UI turns blue.
And now anything I do in this state is gonna change what happens to this image when I hover on it. So I want this image to be hidden. So I'm gonna click on a opacity and bring it right down to zero. And I'm gonna click off hover. So as I click that on and off, you can see this is what happens when I hover on it, it disappears.
Now I wanna slow down this transition so I can click back on it and actually bring this up to maybe half a second. You can even type in 500 milliseconds here. And this now means that when I hover on it, this transition is gonna be half a second long and now you can see a blue dot. This references a hover action as being implied to this.
See what happens if I actually change it. To 50%. Now that means it is 50% normal state, and then it is 100% opacity in its hover state. So I'm not gonna leave that on. I'm gonna keep it as 100% opacity, but that's why you can see these two yellow and blue. The yellow refers to the. Square kicker changes on the block and the blue refers to the square kicker changes when hover is activated.
And that wraps up this tutorial on changing images on hover in Squarespace. Make sure you hit the subscribe button and get a heads up on our new tutorials.
