In this video I’ll go over how to change an image on hover in Squarespace.
Following on from my last video I’ve had loads of messages from people asking if it’s possible to change an image on hover in Squarespace. It is!
In this video we’ll do this with a bit of HTML and CSS.
We’ll also have to prepare our images for the change on hover effect, I’ll be using Canva to do this (link below) and upload the images to Squarespace’s CSS Editor.
1:57 Squarespace Bit
**IMPORTANT**
If you are having problems with one of the images appearing smaller/bigger on hover this can be fixed by removing the padding from the Code Block.
To do this you’ll need to use Squarespace Block/Collection Identifier plugin (link below) for Chrome to get the ID of the Code Block that contains the image URL’s.
Once you have the Code Block ID head over to your CSS Editor and add the following CSS, replacing YOURBLOCKID with the one copied from the Block/Collection Identifier plugin
YOURBLOCKID {
padding: 0;
margin: 17px;
display: flex;
align-content: center;
}
You can adjust the 17px value for the margin up or down depending on how much space you would like around your image.
Subscribe for more Squarespace tutorials: https://www.youtube.com/channel/UCj5IKSve_UEy6o63smGaSLg?sub_confirmation=1
Share this video: https://youtu.be/7WC906n4t5c
Watch next – Squarespace Image Text Overlay on Hover https://youtu.be/YF9-eJMgYMw
Recommended Playlist – Watch more Squarespace tutorials https://www.youtube.com/playlist?list=PLbVs8R92sFeklpP7aM-gpmjjIkJsiQyOV
______________
Want to support my content? Consider donating here:
https://www.buymeacoffee.com/carljohnson
______________
New to Squarespace? Sign up https://squarespace.syuh.net/carljohnson (that’s an affiliate)
Link to Canva: https://canva.7eqqol.net/carljohnson (that’s an affiliate too)
Squarespace Block/Collection Identifier: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
______________
Join me on Twitter – @MrJohnoCP
______________
If you’ve got any questions or requests for future videos drop them in the comments below 👇
________________________
GEAR I USE
CAMERA
▸ Canon 90D https://amzn.to/3hbVfSp
AUDIO
▸ Blue Yeti https://amzn.to/3DToEKK
▸ Boom Stand https://amzn.to/3DUb9KN
▸ Boya Lav Mic https://amzn.to/2WUGFaE
LIGHTS
▸ Neewer LED’s https://amzn.to/3DU4TD6
▸ Soft Boxes https://amzn.to/3ha7S0j
DESK
▸ Mouse https://amzn.to/3E4IRxw
▸ Keyboard https://amzn.to/2WUB8S0
▸ External Storage https://amzn.to/2X1h13S
▸ iPad for Extra Screen Space https://amzn.to/3zSjcpe
▸ iPad Mount https://amzn.to/3BJ2ARc
________________________
#Squarespace #SquarespaceTutorial #CSS
