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 Photo Hosting
The next step in the process is to upload to a photo hosting website. To achieve this effect you'll be using code so you will need to host your image on another site instead of your usual uploading directly through Squarespace. I've used Photobucket for this process, but you're welcome to use whatever service you prefer. The process will be the same.
Step 3: Implement Code on Your Website
Woh hoh, 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 that you have uploaded your images on your photo hosting website you will need to locate the URL address of each. This is called the "Direct Code" on Photobucket. 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.
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! If you need help with your Squarespace site check out our handy Squarespace How-To resource page!