Design | Hover Over Social Media Icons

Creating and adding social media icons is getting harder and harder. I cannot count the times I have told my clients as well as readers of my blog that pretty social media icons will land you and your blog in big trouble. And the absolute last thing I want is to get anyone into trouble with their respective social media platforms. Using non-compliant icons is a good way to get your social accounts removed and even get your blog yanked from the world wide web (yes, even you Wordpress users. You may be self hosted but those social platforms will have you taken down fast because you do not own the rights to those icons).

As a designer I have found that the best way to avoid getting into trouble is to use the stock icons provided by the social media platforms themselves. And as the crack down on pretty icons continues, they have graciously allowed us to use the flat black or flat white logo icons on our blogs.

That''s where social media hover comes in. So get clicky with it and let me give you the deets:

A hover over social media icon is really very simple. You are using two of the same icon, one on display and one when someone hovers on it with their mouse to visit your network.

Here's mine:

Notice how when you hover your mouse they change to show the branded colors I am using on my blog?

Now let me give you the easy peasy code on how to set up your own!

<a href="WEBSITE URL HERE" rel=”nofollow target="blank" title="DESCRIPTION OF LINK/WEBSITE">
<img src="DIRECT URL OF IMAGE" border="0" onmouseover="this.src='DIRECT URL OF SECOND IMAGE WHEN HOVERED OVER'" onmouseout="this.src='DIRECT URL OF IMAGE'" />
</a>

All you need to do is copy the code above into a new HTML gadget on your blogs dashboard and change the portions in red to your own information.

Need some social icons to get you started?

All you need to do is right click and save them and then upload to your photo host of choice. Then use that image URL for the part up there in red that says "DIRECT URL OF IMAGE" Then you just find a second social icon to act as a hover. You can simply use a reverse contrast on these to make the black white and vice versa or you can find something totally different.

Either way you'll have pretty new, compliant, social media icons with a touch of glam using a hover effect.