How To Show A Second Image on Hover in Squarespace

In this Squarespace CSS tutorial, I am going to show you how to use an on-page code block to have a completely different second image appear when you hover over the first image. This is a super basic code so I have a few more tutorials planned on how to add things like text and links later on, so be sure to subscribe to my channel so you don't miss the follow-up training!

Anywho, let's start with switching the image itself. This code has three steps. Be sure to watch the video first, then review the steps below when you are ready to try it o your own site!

Step One: Upload your image files to Squarespace in the custom CSS section.

Step Two: Copy those image file URLs so you can use them in your code.

Step Three: Change the text “image one” and “image two” in this code snippet and add it as an on page code block:

<img src="Image One" onmouseover="this.src='Image Two'" onmouseout="this.src='Image One'">

Bonus Step Four: Pat yourself on the back for coding something awesome!!

Bonus Step Five: Let me know how it goes in the comments below! Feel free to share a link to your site so I can see the magic in action :)


Ready for more?

This tutorial is one of over 50 code snippets and plugins from my CSS Cheat Sheet! Learn more about my CSS Cheat Sheet project and how you can get your hands on your own copy.