Squarespace Customization: Use HTML To Change An Image When Your Mouse Hovers Over It

HTML Hover Effect.jpg

I love this lil trick so much!! 

It's such a fun way to add extra personality to a site and it's small touches like this that will make your website experience feel much more special and unique to your site visitors.

Check out this example:

Pretty cute, huh?

Here’s the code:

<img src="FirstImageURLHere" onmouseover="this.src='SecondImageURLHere'" onmouseout="this.src='OriginalImageURLAgain'">

There are three things going on here:

  • First we're establishing the original image that should be on the page.
  • Then we're telling the code what image should appear once a mouse hovers over the original image.
  • Then we're letting the code know we want the original image to appear again after the mouse moves off of the image.

Here's how to do it:

  • First you'll head into your custom file manager (Design > Custom CSS > scroll down the panel and use the upload box).
  • You'll need two files to upload into the file manager: the original image and the hover image
  • You'll upload them individually then simply click the thumbnail to access the image URLs (they'll appear at the top of the custom css box.
  • Copy and delete those from the custom CSS box (you don't even have to save your changes) then head to the page where your hover images will be.
  • Once on the page, add a code content block. Paste your image URLs and the code from above into the box.
  • Follow the prompts I give you within the code by copying and pasting the original image URL into the space that says "FirstImageURLHere" (make sure to delete the filler text and add in new quotation marks).
  • Paste this URL into the space that says "OriginalImageURLAgain". Make sure you don't delete the part that says "this.src=' (and remember to replace the single and double quotation marks).
  • Copy and paste the hover image URL into the middle portion that says "SecondImageURLHere" (delete original text, replace quotation marks, don't delete "this.src'' - you probably know the drill by now).
  • Then simply save your work!
  • The hover effect won't work while you're actively editing a page, so to check your work just save your edits then try it out : )
  • If the hover effect isn't working, it's most likely an issue with the quotation marks (something happens to the formatting of those symbols when you copy/paste). Try editing your code one more time by replacing the quotation marks, save your changes then try again.

You can also customize the final image ("on mouse out") with a 3rd image if you don't want it to revert back to the original. Check out my example below....

To do this simply upload a 3rd image and place it into the last URL spot, then you're all set and everyone will think you're reeeeally cute.

I hope these simple code tricks have been helpful! It really is amazing how much more customized a site can feel with a little ✨  magic ✨ added to the mix.

I'd love to take a crack at any special requests so be sure to leave them in the comments below, and check back next week for a fun way to customize your main navigation :)