Squarespace Code Magic: Hover Images
There is something that just seems *fancy* about an image that changes when you hover your mouse over it. Am i right?
Besides just looking cool, this can be super useful!
Whether you want to use it on an image for a mini "about the author" bit, or you want to use it as a button for a new page, it can look really sleek.
To get this effect, we are going to use two things: the Squarespace Gallery Page feature, and a bit of CSS.
First: Add your images to an unlinked gallery page. I create my images in Adobe Illustrator or Canva and save as a png. You can use transparent images with this hack too!
Now, head to the page you are adding the images to.
You need to add a Code Block, and enter this code:
<a href="LINK TO WHERE THE IMAGE SHOULD GO TO">
<img src="FIRST IMAGE TO BE SHOWN - LINKED FROM A SQUARESPACE GALLERY"
onmouseover="this.src='SECOND IMAGE TO BE SHOWN - LINKED FROM A SQUARESPACE GALLERY'"
onmouseout="this.src='FIRST IMAGE TO BE SHOWN - LINKED FROM A SQUARESPACE GALLERY'" /></a>
This is what the code looks like for the following example:
I feel like there are so many cool uses for this bit of code! If you use it, be sure to let me know in the comments, so I can come check it out!