One of my more recent projects – Oddness/Weirdness, and a couple before that, involved using a hover effect with the social media icons. And, even more recently one of the bloggers who downloaded my free social media icons and shared with me her blog & her hover effect, as well. So I thought I’d share with you how to do this yourself, because it is pretty awesome.
- Use any social media icons you have on hand, or you can download a couple sets of mine. Make sure you have 2 sets of icons, one for standard viewing and one for the hover.
- Upload the buttons to a hosting site, such as Photobucket. This will give you the image link to then use in your HTML code.
- Place them in your sidebar
- For WordPress go to Appearance > Widgets > drag a Text widget to your Sidebar
- Here is the ‘bones’ of the HTML code you’ll need for your gadget/widget*:
<a title="Follow on Twitter" href="https://twitter.com/USERNAME"><img onmouseout="this.src='ORIGINAL IMAGE URL'" onmouseover="this.src='HOVER IMAGE URL'" src="ORIGINAL IMAGE URL" alt="Follow on Twitter" /></a>
*Tip: if you are copying and pasting this code, use Ctrl + Shift + v to paste code without text formatting.
This is what your icons will behave like (go ahead and give them a hover or two, they like it!):
<a title="Follow Carrie Loves on Twitter" href="https://twitter.com/carrieloves"><img onmouseover="this.src='https://photobucket.com/.../twitter.png'" onmouseout="this.src='https://photobucket.com/.../twitter-3.png'" alt="Follow Carrie Loves on Twitter" src="http://photobucket.com/.../twitter.png-3" /></a>
- The original image (or mouse out) is twitter.png and the hover image (or mouse over) is twitter-2.png, your images can have a different naming convention, but name the two images differently to avoid confusion.
- The original image will be listed twice and the hover image once.
- To center align your icons in your widget/gadget add <center> before the code and </center> after the code.
- If you are copying and pasting this code, use Ctrl + Shift + v to paste code without text formatting.
- Need some icons, get them here.