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!

 
Squarespace Code
 

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:


<a href="www.ljmediahouse.com/blog">

<img src="https://static1.squarespace.com/static/59dbc475914e6b12a38d848d/5b0ee40603ce6487f8129e88/5b0ee43cf950b77426281501/1527702607392/1.png?format=1000w"

onmouseover="this.src='https://static1.squarespace.com/static/59dbc475914e6b12a38d848d/5b0ee40603ce6487f8129e88/5b0ee7f31ae6cf3979645113/1527703541377/OnlineBusinessManager.png?format=1000w'"

onmouseout="this.src='https://static1.squarespace.com/static/59dbc475914e6b12a38d848d/5b0ee40603ce6487f8129e88/5b0ee43cf950b77426281501/1527702607392/1.png?format=1000w'" />

</a>


TADA!

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! 

 
 
LJ Media House Blog
 
Pin This!.png