Have you ever seen social media icons, menus, or other graphics that change color when you hover over them? (If not, go check out my design site. See the 3 boxes along the bottom? When you hover over each of them they change!) The effect is not difficult to achieve, but it adds a little something extra to your site.
01. Create Your Images
First things first, you want to create your images. Create one and then duplicate it and change the color. Try to keep them identical aside from the color. That is unless you want your image to “bounce” when someone hovers over it.
After you’ve created and saved both your images, you need to create a new blank image and stack the two images on top of one another. Place the image you want to appear on hover at the top and the other image at the bottom.
02. Apply CSS
Now that the images are done, it’s time to edit your CSS. For Blogger blogs, go to Template > Customize > Advanced > Add CSS. In WordPress, go to Appearance > Editor > Stylesheet. Copy and paste the following code, making sure to make any changes.
background: url('STACKED IMAGE URL GOES HERE') bottom;
height: 100px; //Height of the individual images, not the stacked one.
margin-right: 3px; //This adjusts the spacing between the icons.
width: 200px; //Adjust to your image's width.
background-position: 0 0;
You’ll need this snippet of code for every image you want to add the hover effect to. For example, if you were making social media icons, you’d need the code for Twitter, Facebook, Instagram, Pinterest, etc (change .portfolioLink to .twitterLink, .facebookLink, .instagramLink, .pinterestLink, etc).
03. Insert HTML Into Widgets
You’re almost done! Go create a new text gadget/widget and paste the following code for each image created.
<a class="portfolioLink" href="URL GOES HERE">Portfolio</a>
And that’s it!
I hope you found this helpful! If you use it, I’d love to see the finished product in action!