This is a helpful code snippet that can be used to swap images on the mouse over event. I’ve used this code on SquareSpace, WordPress, and beyond, and it’s always functioned correctly. Overall, the snippet has a lot of potential!
The Process
- Copy the code snippet below paste it inside an HTML widget or code block.
- Replace the first-image.png and hover-image.png with your specific image URLs. Mind the quotation marks to confirm they’re not deleted.
- Preview the code and verify it’s working correctly. Voila, that’s it!
The Code
<img src="first-image.png" onmouseover="this.src='hover-image.png'" onmouseleave="this.src='first-image.png'" alt="Alt Text Here">You can see the code in action in the ATF section on my homepage. Simply hover on the swatches panel and watch it open up! If you’re low on time, you can see the swatch panel image swap below as an example.
The Cons
Using SVG files within the code is possible, but I’ve noticed the functionality is not consistent. In some cases, it shows as a broken image prior to hovering. Putting the sizes inline within the HTML seems to work, but it’s not 100% accurate. Once I know a proper solution, I will update this post.
Giving Credit Where Credit is Due!
I originally found this code snippet on a helpful blog post by Tiffany Davidson.
