How to add hover effect to icons - Carrie Loves blog

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.

*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!):

Follow on Twitter


Follow on Twitter
Here’s my finished code for the Twitter icon:

Killer Tips:

20 Responses

  1. Thanks for this. I just realized that nothing was happening when I hovered over my icons. I don’t think i’m ready for the icon color changing just yet lol but at least I fixed the hover wording. Thanks for the reminder :]

  2. Hello!
    Let me start by saying that I LOVE YOUR SOCIAL ICONS! I am in awe! Thank you for sharing them! I am a little peeved I cannot get the hover effect to work on Blogger. More than likely I have done something wrong ๐Ÿ™ As I am less than great with HTML. But I have at least one of the styles I loved of yours on there. Thank you so much! I love your blog as well by the way! ๐Ÿ™‚

  3. Hi. Thanks so much for the tutorial! But I’m so confused ๐Ÿ™ I’m a newbie. . . and I don’t know how to get the URL of my icons from photobucket like yours. Mine don’t start with http://photobucket….. PLS help me out!

  4. For some reason (I have a WordPress site) the text widget keeps deleting my code for this scroll over. I tried looking it up, could it be due to some code restrictions WordPress has? Carrie, were you able to get it to work on a WordPress site? Maybe I’m just dumb. ๐Ÿ˜‰

    1. Unfortunately I have the same problem. I used the code you gave us but WordPress is deleting half of the code – so no hover at all and not working links.
      Hope you can help me Carrie ๐Ÿ™‚

  5. thanks Carrie – the simplest solution by far and a very nice effect now for my social icons ๐Ÿ™‚

  6. This is an awesome tutorial! My blog is taking forever to dress up, as I’m doing the whole design myself. It’s my first blog and I’m quite a perfectionist so I’m reading tutorials, little by little figuring it out. This was the simplest and one of the coolest (extra thanks for the beautiful share button collections!)

  7. Thank you! The tutorial was really easy to follow and the result is amazing! It’s my first blog, and I am trying to customise it all by myself, and to be fair, I am getting into it a lot ๐Ÿ™‚

  8. Also a newbie and unable to get it to do this. It just comes up with a broken icon picture :(. Thanks for the free icons however, I have used them ๐Ÿ™‚ x

  9. I’m also a newbie and this worked for me. i got some retro icons and modified the mouse over variation in photoshop. Thanks for the tip!

  10. My website builder comes with a pre-programmable social media icon set which I find really tacky.

    This tutorial has added a real polished look to my site where social media icons are concerned, and we’re all about social media so that is important.

    Thank you Carrie!

  11. hello…
    Iโ€™m so confused
    present time normal social media icon… but we want to mouse hover social media icon change icon color in css…

    please send me code link……

    thank you..

  12. Thank you SO much!! This is exactly what I was looking for, and your tutorial and the short and sweet code snippet did the trick! I saved it in my WordPress tips and tricks folder so I can always refer to it in the future.

Comments are closed.