Something we've totally become obsessed with lately at Bold & Pop is hover animations on your website! What is that? It's when you scroll over an image or button on a website that changes to something else when you hover over it. Watch the branding party button below!
See the confetti?! 🎉 How fun right?! We implemented this design technique on #ThePopShop and we've had so many people ask us how we did it so today I'm spilling the beans on the steps to make it happen on your website too! It's SUPER easy too so I'm excited to share. If you've been following along for awhile, you know that Squarespace is our web design platform of choice so today's post is specific to that.
Step 1: Create Your Graphics
The first step to creating hover animation graphics is to design the graphics that you will be including. You'll need two options, the image that will appear when people visit your website to begin with, and then the image that will appear when you hover over the image or button.
If you're using text like we did, you'll want to make sure everything lines up exactly except for the things that will vary. So for example, I made sure the Branding Partay!! text was exactly the same in each graphic and I just added an element (the confetti) in the second option.
Step 2: Upload to your Squarespace Website
The next step in the process is to upload the image to Squarespace. You can do this easily by adding text and hyperlinking the word to upload a file. Squarespace has a page specifically on this if you haven’t done it before. What you’ll want to do is click the “files” options and then you can upload your file.
Click “add link” when you are done. The nice thing about using a hyperlink is now you can easily get the url or where that file is located, which you’ll need for the next step. If you haven’t done this before it can be a little confusing at first so I added a video below.
Step 3: Implement Code on Your Website
Once you have those links, it’s time to move onto the last step! Start by adding a code block to the part of the page you would like and then copy and paste the code below into that block.
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
Now it’s just a matter of a little copy and paste action! Start with the first image and place that code within the quotation marks for the first image. Since it is a hover image you will enter this URL into the front of the code as well as the end. This tells your website that you only want the second image to appear when the mouse is over it. Once you have the first entered, repeat the process for the second image and add that URL into the code. Click save and wa-lah you did it! To see your handy work you can refresh the page or view it on your website in live mode (it won’t show up in edit mode).
We've had so much fun with this and hope you will find creative ways to use it on your site as well. If you need some inspiration ideas for what you can do feel free to check out some of the other hover graphics we designed for #ThePopShop!