CSS3 Rollover Social Media Icons

  • follow us in feedly
Published February 24, 2013 by Brad Knutson
CSS3 Social Media Icons

There are many cool ways to display your social media icons on your website. Many of the more impressive animations required either jQuery or CSS3, and a little coding know-how. In this post I’ll focus on CSS3 examples. Below are some flashy examples that I came up with.

Slide rollover animation

This example requires a finite sized social media icon, and that you splice together two versions of the image one on top of the other. When you roll over any of the items, the background position is changed, and CSS3 takes care of the smooth transition.

CSS

.social-slide {
	background-image: url('path/to/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -48px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Spinning rollover animation

Round or square images will work for this example. If you use square images, make sure you set the border-radius property.

CSS

.social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

Pop-out icons

Roll over these icons and it appears as if they are popping out of the page. This is accomplished by animating the position of the image and the box-shadow

HTML


<div class="social-popout"><img src="path/to/image.png" /></div>

CSS

.social-popout {
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img {
	border-radius: 50%;
	margin: 8px;
	width: 100%;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img:hover {
	margin: 0px;
	box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

304 thoughts on “CSS3 Rollover Social Media Icons

  1. ali

    very nice. codes and specially social media icons are free for commerical use? i can’t find any information about this in your site.
    thank you.

    Reply
    1. Brad Knutson Post author

      Hello Ali,

      Yes, you are free to use any icons and CSS that I’ve posted on this page if you’d like!

  2. Terry

    Hi Brad,
    Thanks a lot for all the examples, they are perfect. I’m trying to get the slide effect on my site at the moment but figuring out the code is proving very difficult for me!! I have put in the css but writing the html even after inspecting the code for your icons is a bit confusing, would you be able to give us a quick example of the corresponding html that needs to be put in? sorry to be a pain! Thanks bud.

    Reply
    1. Brad Knutson Post author

      Hey Terry,

      I’m glad you enjoyed the demo. Here is what I use for the HTML to display the row of buttons:

      The icon-specific CSS classes are what I use to set the background image for each div – and the “social-slide” class uses the exact CSS that I posted in the article. Remember – we’re not displaying images in these divs but rather background images, they are essentially empty. We use sprites to initially show one icon and show another on hover. Here is the Twitter icon I use:

      The divs have a set height and width but are otherwise empty. Also – if you want to use another set of social media icons, you’ll probably need to modify the height and width of the div.

      If you’re still having trouble, I would be happy to put together a package that you can download from this page (like a downloadable demo) or you could give me the URL of the page you are working on and I could troubleshoot what is going on.

      Thanks for reading!
      Brad

    2. Terry

      Hi Brad,

      Thank you for your reply and your generous offer, I’ve managed to get it to work after your guidance!

      Have a look at it at http://www.pitchandtoss.co.uk and let me know what you think. Thank you for all the help. Drop me your email if you have a minute, it would be great to stay in contact!

      Thanks again,
      Terry

    1. Brad Knutson Post author

      Hey Matt,

      I’m glad you like the tutorial. Since I chose to use an empty div with a background image, the HTML markup will look similar to this:

      If you want to link the icon, just wrap it in an anchor tag, like so:

      That should do it!

    1. Brad Knutson Post author

      Hello Tahir,

      In order to use in WordPress you’ll need to add the CSS to your themes stylesheet. Often times the stylesheet is called style.css and is located in your theme root folder. You’ll also need to upload the images or sprites and reference them in your CSS.

      I hope this helps! Let me know if you have any other questions.

  3. harsimran

    Hello Brad. I am very glad to see that you shared very useful information to us and thanks a million for that.
    I would be very grateful if you would tell me the final code that i can put on my blog with all these effects. Thanks a lot in advance.

    Reply
    1. Brad Knutson Post author

      All the code you need should be on this page. Every situation will be slightly different, is there something specific you are looking for?

  4. Dan Bonebright

    Hi Brad –

    Thanks for a great post. Is it possible to get the square png’s you used for LinkedIn and Google+ (like the Twitter png you posted in your follow-up comment)? Also, is there an RSS icon? Thanks again!

    Reply
    1. Brad Knutson Post author

      Hey Dan,

      Sure – here are all the sprites I made:

      • Facebook Sprite
      • Google+ Sprite
      • Instagram Sprite
      • Linkedin Sprite
      • RSS Sprite
      • StumbleUpon Sprite
      • Tumblr Sprite

      Let me know if you need anything else!

    2. Dan Bonebright

      Wow. Thanks again! One more question – I know you probably answered this in a previous comment, but I was having a hard time figuring it out: If I want to display five social icons, would I need to replicate the original CSS code five times with five image path URLs?

      I think I understand linking to them via HTML. It would just be five lines of this code (with corresponding URLs and divs):
      <a href=”https://twitter.com/danbonebright” rel=”nofollow”></a>

      But let’s say I wanted to do Facebook – where would point to?

      Thanks again for all your help. Above and beyond!

    3. Brad Knutson Post author

      Not a problem at all, Dan!

      To display multiple images, and to keep your code to a minimum, we’ll want to re-use most of the CSS. In order to do this, I give each icon it’s own class (example: twitter-hover, facebook-hover, etc – they can be whatever you want), and another class they all share.

      Here is the HTML that I used to display the square icons at the top of this post. If you want to link them to your social media pages, just surround the entire div with an a tag and change the href to the URL of the page.

      As you see, each icon has it’s own unique class, and a shared class.

      The shared class will have all the CSS necessary to create the animation and effect. The unique class will be nothing more than a link to the unique background image. Below is the CSS that I used for the icons.

      So the social-slide class includes all the CSS necessary for the effect (the size of the div, the background position, margin, float, transition), and the hover-state, .social-slide:hover has the CSS after the user has moved the mouse over the div (in this case, just moving the background image up, and adding a box-shadow). The individual classes only have the background-image, that’s it!

      I hope this helps, let me know if you have any more questions. Feel free to email me at brad.s.knutson@gmail.com if you’d like.

    4. Dan Bonebright

      Again, thank you so much. The unique class was all I needed to make it perfect! Unfortunately I had the HTML code correct, but it didn’t show up in my last comment, so that would have saved you a step.

      I will definitely keep reading your awesome posts – and you should feel great about the way in which you follow up with readers. Well done.

    5. Brad Knutson Post author

      I’m glad you liked my post, and thanks for your kind words! I’m always happy to help!

    6. Rosid Ridho

      I tried to mix the slide rollover’s css in this comment with Spinning Rollover you give at the post and its works, but it don’t goes smoothly.
      Do i have to used a different picture background for the hover?
      Is it possible to use a same/combination picture like in slide rollover to make it simple?

  5. Michael

    Hi Brad –
    This is great, I love the simplicity and excellent examples…

    I’m having trouble with the ‘spinning rolling animation’, I cant seem to get it to work with IE. Firefox and chrome ok, any suggestions?

    Michael.

    Reply
    1. Brad Knutson Post author

      Would you mind posting your website URL, or sending it to me via email – so I can take a look at it? (brad.s.knutson@gmail.com).

  6. Andrea

    Hi Bread!

    Thank you for the great tutorial!!

    May I ask you about one problem with the Slide rollover animation?!

    I’ve my own Icons (bigger than yours size 126×126).

    Than I’ve the Icon.css file you’ve share.

    When I insert

    I don’t see anything in the page.. Have a solution about this?!
    Sorry for bothering you and thank you for the attention,

    Andrea

    Reply
    1. Brad Knutson Post author

      Hi Andrea,

      I’d be happy to help, but it looks like you tried to enter some code into the contact form. I sent you an email so please feel free to contact me with any questions!

      Thanks,
      Brad

    1. Brad Knutson Post author

      Unfortunately I don’t have a github icon, but it shouldn’t be too difficult to make. I took colored social media icons and made 48×48 squares, then made a black and white version and combined them to make a sprite.

    2. Martin

      Hey Bhushan, did you manage to create the GitHub icon? I’m plan to use the hover example instead of popout, but it would be great if you had something already. :-)

    3. Brad Knutson Post author

      I don’t, I’m sorry – it shouldn’t be too difficult to come up with some on your own though :)

  7. Grant

    Hey Brad,

    These are awesome.

    Don’t suppose you have YouTube & Vimeo sprytes for these options? Thought I’d ask before I head over to Photoshop/Indesign/Illustrator to try figure it out.

    Thanks!

    Reply
  8. Sam

    Any chance you can provide the sprites you used for twitter and instagram for the spinning rollover animation buttons?

    Thanks!

    Reply
    1. Brad Knutson Post author

      I didn’t use sprites for the spinning animation, but it certainly could be done. Here are the images I used.

      • Twitter Gray
      • Twitter Color
      • Instagram Gray
      • Instagram Color
  9. Armando Cifuentes

    Thank you for the tutorial. I’m new in this area of WEB Design with HTML5 and CSS3.

    Question: can you put the complete code for the slide rollover animation and the images that you used?

    Reply
    1. Brad Knutson Post author

      The code I used will vary based on your usage, but the basic implementation is in the post. The images are dispersed throughout these comments, if you need any others let me know.

      Is there something specific that you would like help with?

  10. Ilias

    I would like to say thank you very much , it helped me a lot in styling my website sepcialy i’m a bit new with css and html , againg thank you so much

    Reply
  11. Tapas Ranjan Singh

    Awesome work Brad. I loved your work. I need a help from you. Slide rollover animation is not working in IE. Any specific changes, that need to be done ?

    Reply
  12. agus

    Sorry.

    Hi Brad,

    Thanks a lot for all. I’m trying to include your code and social icons in a web I’m developing but I can’t understand why if I include the line

    link rel=’stylesheet’ href=’style.css?ver=3.5.1′ type=’text/css’ media=’all’

    in the html file it’s not working.

    However, if I change that line by:

    link rel=’stylesheet’ href=’http://bradsknutson.com/wp-content/themes/bradsknutson/style.css?ver=3.5.1′ type=’text/css’ media=’all’

    it’s works like a charm.

    But more disconcerting is that if I copy your http://bradsknutson.com/wp-content/themes/bradsknutson/style.css file and put it in my directory as style.css it’s not working too.

    Sorry for my English.

    Thank you.

    Reply
    1. Brad Knutson Post author

      It probably has to do with the path to the social icons or sprites you are using. When you link to my stylesheet – the relative path to my images points on my server and correctly finds the images. When you download my stylesheet, the relative path is now looking on your server for the images, and unless you placed them in the correct directory, they won’t be found and the effect won’t work.

  13. agus

    Thanks a lot.
    Yes, you’re right. Now is working. I had to change permissions in ubuntu directory.
    Thanks again.

    Reply
    1. Brad Knutson Post author

      If you are using the TinyMCE editor you’ll probably want to switch to text view to enter code like this. I’m not familiar enough with Joomla to know if it strips out style blocks or other HTML tags so you’ll probably need to add the CSS to your main stylesheet. Hope that helps!

  14. agus

    Excuse Brad,

    ‘Pop-out icons’ work very well but I can’t get ‘Slide rollover animation’ run.
    I’ve download sprites from this page but only appears an empty square.
    Is there any difference between these icons? Both of them are png files.
    Thank you.

    Reply
    1. Brad Knutson Post author

      If one works and the other doesn’t, it’s probably an issue with the file path again. Make sure you can get to the image from your browser, then make sure the path is properly set in your CSS.

  15. agus

    Thanks for answering.

    From browser (Firefox) I do can get the image at:

    file:///var/www/drupal/themes/business/images/linkedin-hover.png

    Path seems to be properly set in style.css:

    background-image: url(‘images/linkedin-hover.png’);

    but doesn’t work.

    The difference I can see is that path is set in html file in ‘Pop-out icons’ while is set in css file in ‘Slide rollover animation’.

    html and style.css files are located at the same folder /var/www/drupal/themes/business

    Thanks,

    Reply
    1. Brad Knutson Post author

      It’s difficult for me to troubleshoot the issue without seeing it myself. Do you have this installed locally or on a public web server? Can you shoot me the URL?

    1. Brad Knutson Post author

      Looks like you are using the code that I used in the footer (Twitter has the classes “fsocial” and “ftwitter”). I modified the class and style just a little but for my personal use (which you should too). If you use the classes that I used in the example at the top of this page, and the corresponding CSS, it should work just fine.

  16. agus

    Great. It works!. Thank you very very much.

    (Sorry but I copy pasted your code only for testing icons. I’ll modify every link.)

    The world needs more people like you.

    Very kind, Brad.

    Best Regards from Spain.

    Reply
  17. Amar

    Amazing work…
    I need skype, facebook, twitter, linkedin, google+ and youtube icon of 32 px.
    Can you help me??
    How to make spirites?

    Reply
    1. Brad Knutson Post author

      Hello Amar – thanks for commenting. Do you need squares or circles, and I assume you’ll need gray and colored versions?

      Since you’re talking about making sprites, I assume you’re referring to the the square social media icons.

      • Skype Sprite
      • Facebook Sprite
      • Twitter Sprite
      • Linkedin Sprite
      • Google+ Sprite
      • YouTube Sprite

      Let me know if you need something else!

    2. Amar

      Hi Brad,
      Thanks for your kind help.
      I was looking for the square sprites only but of 32px size.
      Means height of the sprite should be 64 px and width 32px.
      So, can you help me with that?
      Hope you will not mind.

    3. Brad Knutson Post author

      I don’t have any sprites created at that size, so if I was to make them I would just re-size the sprites I posted above. I tested it briefly on my machine, and the images look good – so I would take that approach.

      Thanks for commenting!

  18. AJ

    First and foremost, I wanted to thank you for the great article and incredible technique, I was really impressed and intrigued by the CSS effect.
    If you do not mind me begging, could you provide me with round sprites for: YouTube and RSS?

    Thank you in advanced for your kindness !

    Reply
    1. Brad Knutson Post author

      In my example, I decided against using a sprite and choose to use separate images. You certainly could use a sprite though, would just need to tweak the CSS a little. Here you go:

      • YouTube Circle Gray
      • YouTube Circle Color
      • RSS Circle Gray
      • RSS Circle Color

      Let me know if you need something else!

  19. Rehman Baig Mirza

    Very nice effects. Particularly the spinning and popup effect. Thanx Brad for sharing :). can i also know how to give rating box which will appear on hover and user can rate by clicking on star. thanx

    Reply
    1. Brad Knutson Post author

      Hey Rehman, thanks for the comment.

      You could use these effects for a ratings box, but it will also require an AJAX call to a backend script to process the rating portion.

    1. Brad Knutson Post author

      Hey Edson – it looks fantastic! I really enjoy seeing my examples put to good use!

  20. ravi

    Hey very Awesome collection…Nicely done..I wanna to ask u one thing can I get effect by JQuery? would be possible by JQuery? plz reply me to my personal email : ravichandramouli811@gmail.com.. I want only social groups by Jquery…I know how to do with CSS..

    Thank You……

    Reply
    1. Brad Knutson Post author

      Hello Ravi,

      You absolutely could recreate these effects with jQuery. Which effect are you interested in?

  21. Felicity

    Hi there – thanks for this, it was just what I was looking for! Question though – how did you get the rounded edges in the individual images you provided in the post above?

    Thanks again!

    Reply
    1. Brad Knutson Post author

      The social icons that are circles are actually a different set of images, with rounded edges. You could also accomplish it with CSS however:

      Thanks for commenting, hope this helps!

  22. Jaye

    Hi I’m trying to setup another blog and I’m havig trouble getting the icons to show up. I’ve done the css and the html tag but all the icons only show up as the most recent css. Is there anyway that you could help me?

    Reply
    1. Brad Knutson Post author

      What CMS is your blog built on? If you use WordPress, it’s possible you have WP Super Cache or a similar plugin that is preventing your new CSS from showing up on the front end. One way to make sure that your new CSS is showing up is to view the source of the page, click on your stylesheet, and find your new lines of CSS. If the CSS isn’t there, try flushing the cache. If it’s still not there, then perhaps you added it to the incorrect stylesheet, or one that is not even being referenced by your website.

      If the CSS is there, but the new style isn’t being applied, perhaps there is other style with a higher priority for the class or ID you chose. Inspect the element with Firebug to see what other styles are being applied, and see what you can do about eliminating them. If all else fails, you could add “!important” after your new styles to make sure they take priority over older styles.

      Hope this helps!

    2. Jaye

      I’m using blogger maybe that’s why. Plus I only entered the css into the advanced tab in the template designer where it says add css, I didn’t enter it onto the stylesheet. I find the stylesheet a little bit complicated.

    3. Brad Knutson Post author

      No problem – can you shoot me the URL of the page that you are struggling with? I’ll do my best to help! Blogger can be tricky because you don’t always have access to things, but we should be able to get it working.

      If you’d rather email me, my email can be found on my About page at the bottom (green letter icon). Thanks!

  23. Tom

    Brad, absolutely 110% awesome stuff… Just the help I needed while brushing up on my CSS. Nice simple implementation, and thanks for the extra sprites!

    Reply
    1. Brad Knutson Post author

      Hey Trung,

      You can accomplish this by changing the background position. You can even use the same social media icon sprites in this example.

      Hope this helps!

  24. Vishal Khare

    I wish to implement the slide change transition in my website. I have tried a lot but unable to do so.
    Following is the HTML code i am writting on my index page-

    And following is the code i am implementing on CSS file-

    .social-slide {
    height: 48px;
    width: 48px;
    margin: 10px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    }
    .social-slide:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
    }
    .twitter-hover {
    background-image: url(‘images/twitter-hover.png’);
    }
    .facebook-hover {
    background-image: url(‘images/facebook-hover.png’);
    }
    .google-hover {
    background-image: url(‘images/google-hover.png’);
    }
    .pinterest-hover {
    background-image: url(‘images/pinterest-hover.png’);
    }
    .linkedin-hover {
    background-image: url(‘images/linkedin-hover.png’);
    }
    .tumblr-hover {
    background-image: url(‘images/tumblr-hover.png’);
    }
    .reddit-hover {
    background-image: url(‘images/reddit-hover.png’);
    }
    .instagram-hover {
    background-image: url(‘images/instagram-hover.png’);
    }
    .stumbleupon-hover {
    background-image: url(‘images/stumbleupon-hover.png’);
    }

    Still i am unable to render it. the image is just not showing up on the webpage.
    Please help me out.
    P.S.- i ade my own sprints of 50*100 pixels.

    Please help…!!!!!

    Reply
    1. Jose

      Thanks a lot , you are awesome. I inserted the images and css and it’s working great, the only issue I have IE 10 is not showing on the same place is showing on the other main browsers i,e chrome, safari, firefox,

      Best Regards

  25. kumar

    i am trying to use the same logic as you have applied for the social icons on one slider, i want to make similar to the (http://www.sourcebits.com/) at the from the blog part at bottom side of the home page, when you mouse hover on that box,, it opens the blue box right side saying “Read The Blog”, i want to have similar effect so it opens the right side box and showing some msg,, can you please help me in this???

    Reply
    1. Brad Knutson Post author

      Hello Kumar,

      What you have there is acontainer, with two absolutely positioned div inside it. One div has a higher z-index, and is height and width are set to 100%. The second div is smaller and position right: 0;. When you hover over the container, the first child div slides to the left, to reveal the second child div underneath. Hope this helps!

  26. Brian

    Hi Brad,

    Thanks for the great tutorial! Like many others I’m new to CSS and HTML, and posts like yours makes the world a better place and keeps people smiling.

    I’m working on my own icons for the slide rollover animation, and following your lead, I have it all right and it’s working great. Woo!

    Here’s the problem I’m trying to solve:
    I’d like to force the images to be half the size as a simple fix for hidpi (retina) displays so the icons stay sharp. Since there’s no ‘img’ tag, I can’t use ‘img’ in the CSS, and I’ve tried simply changing the dimensions of your CSS to 24px by 24px but that just crops the image.

    Thoughts? Thanks!

    Reply
    1. Brad Knutson Post author

      Hello Brian – I’m glad you enjoyed my tutorial!

      The way I presented the example was using a fixed div with a background image. It would also be possible to change your HTML and CSS to use an img instead. You would just need a little bit of CSS modifcations, and it should function the same. Set the height and width and make overflow: hidden;.

      Give it a try and see what you can come up with. Tinkering is half the fun! If you struggle or need more assistance, let me know and I’ll whip up an example for you.

      Thanks for reading and commenting!
      Brad

    2. Brian

      Hi Brad,

      I think I’ve got everything working except for two things:
      1) how to move the image, since it’s no longer a ‘background’ image. I don’t know enough about HTML or CSS to fix it with any proficiency…
      2) I believe the ‘img’ tag needs to be called something different, otherwise all ‘img’ tags will be affected when I move it to my site?

      The good news is by using the ‘img’ tag I can now force the dimensions I need while using a larger dimension file. And everything works except for the image position on hover.

      HTML

      Test | CSS3 Slide Rollover Social Media Icons

      CSS

      .social-slide {
      height: 24px;
      width: 24px;
      overflow: hidden;
      margin: 10px;
      float: left;
      -webkit-transition: all ease 0.3s;
      -moz-transition: all ease 0.3s;
      -o-transition: all ease 0.3s;
      -ms-transition: all ease 0.3s;
      transition: all ease 0.3s;
      }

      .social-slide:hover {
      background-position: 0px -24px;
      box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8);
      }

      img {
      height: 48px;
      width: 24px;
      }

      I think I know enough about HTML and CSS to be dangerous, but I certainly am not sure what I’m doing.

      Thoughts?

    3. Brad Knutson Post author

      Knowing enough to be dangerous can be fun :)

      After giving this some thought, let’s make a few modifications. Let’s wrap the image in a container div.

      <div class="social-image"><a href="" target="_blank"><img src="" alt="Twitter Social Icon" /></a></div>

      Now we want to add a little CSS to the container div.

      .social-slide {
      position: relative;
      overflow: hidden;
      height: /* Fixed height */
      width: /* Fixed width */
      }

      Now we’ll get rid of the over state that you previously had for .social-slide. Use the CSS you already had for the CSS transitions. Now we’ll add new CSS for the image tag. We’ll also use the class on the container div to only add these effects only to our social image(s).

      .social-slide img {
      position: absolute;
      top: 0px;
      }
      .social-slide img:hover {
      top: /* Negative fixed height */
      }

      This should work, let me know what you think!

    4. Brian

      Hi Brad,

      Thanks for the insight, I had to put some thought into it!

      Also, I think my HTML got cut off? I’ll try just copy / pasting starting with the ‘div’ tags:

      Technically it works, but the image pops in to place without the fancy roll effect, and there’s no shadow on hover, see the comments and see if this makes sense.

      HTML

      CSS

      .social-slide {
      /* Controls image height visibility */
      height: 24px;
      /* Controls image width visibility */
      width: 24px;
      /* Hides bottom half of the image */
      overflow: hidden;
      margin: 10px;
      float: left;
      -webkit-transition: all ease 0.3s;
      -moz-transition: all ease 0.3s;
      -o-transition: all ease 0.3s;
      -ms-transition: all ease 0.3s;
      transition: all ease 0.3s;
      }

      .social-slide img {
      position: absolute;
      top: 0px;
      /* Controls overall image height */
      height: 48px;
      /* Controls overall image width */
      width: 24px;
      }

      .social-slide img:hover {
      /* Moves, but does not have the slide effect */
      top: -24px;
      /* box-shadow does not work? */
      box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
      }

      .social-image {
      position: relative;
      /* Controls image height window */
      height: 48px;
      /* Controls image width window */
      width: 24px;
      }

    5. Brad Knutson Post author

      Pasting HTML into the comments section doesn’t work, it strips them out unless you use HTML characters for the tags. It’s ok, I know what you’re going for.

      A few comments. The reason you can’t see the box-shadow on hover is because it’s applied to the image element. The box-shadow property extends beyond the limits of the element, and since the container element is set to overflow: hidden;, that is why we don’t see them. Set the box-shadow on hover on the container element and you should see it.

      The same is true for the smooth CSS transition. Add the CSS for the transition to the .social-slide img and it should be good!

      Hope I was helpful!

    6. Brian

      Thanks Brad, you rock. I feel like my 2 year old, “I did it!” … well, you did it, but still it’s working on my end and I learned a lot.

      Updated test files: https://gist.github.com/briankross/6432770

      I hope this helps someone else looking for the same info. This method allows control over the image so one can make a @2x (hidpi) image and force it down to the desired size so the icons look crisp on hidpi (retina) displays. I have gathered all of the official graphics and will be creating my own icons for this project.

      When I have the time I have online video training waiting for me to complete on HTML and CSS, perhaps then I’ll be able to use FireBug more effectively!

      If you have any questions about pro audio or photography, feel free to ask. My blog doesn’t really reflect what I do, I don’t have very much time to dedicate to it. Perhaps I have too many hobbies…

      Thanks again!

    7. Brad Knutson Post author

      I love photography, but I am what you would call an “Instagram Photographer” :)

      If you want to learn more HTML, CSS or maybe even some hardcore programming languages (hey…they can be fun too!) check out Treehouse. They have a ton to offer, and you can get 3 months free if you sign up for an annual subscription. If not – you always have me as a resource :)

      I’m glad it worked out for you, and I’m glad you learned something. I really enjoy experimenting on all the interesting examples people come up with. I’m more than happy to help if you ever have any questions!

  27. pattie

    Hi Brad,

    Would you have the round sprite icons for the spinning rollover animation? This is exactly what I have been looking for. My client will be thrilled!

    Pattie

    Reply
    1. Brad Knutson Post author

      You are correct, for the spinning example I didn’t use sprites, but you certainly could! I’m glad you found the images, let me know if you need anything else!

    1. Brad Knutson Post author

      Hello Ahmed – Which animation are you referring to? You should be able to view the source on this page and save the Pinterest icon you are looking for.

  28. Jim

    Brad-
    Very nice work. Seems like most of the comment support is for the slider theme. I’m most interested in the popout theme since it works perfect with my wordpress template. I’ve managed to get the icons to display and link, however, they do not popout.

    You can view the code here: https://gist.github.com/mcneal6/6597437

    Any help is greatly appreciated.

    Thanks,
    Jim

    Reply
    1. Brad Knutson Post author

      Hey Jim,

      It looks like it’s because you are setting the icons as background images, where in my demo I used them in &gtlimg< tags. Can you give that a shot and let me know if it’s still not working?

      Thanks!
      Brad

    2. Jim

      Sorry, it was originally set up with the Slide rollover, hence the ‘background-‘ text. When I remove ‘background-‘ the icons are no longer visible. I’m going to try and strip down the footer to the bare essentials to see if that helps.

      BTW, I have no idea what I’m doing. I don’t want to keep bothering my web-guy. Thanks, again!

  29. Darryl

    Dear Brad,

    Thanks for your example regarding Rollover social media icons. I’m really grateful for your advice.

    I managed to the slide example to work.

    But the one I really want to use are the spinning rollover icons. I don’t quite understand your example.

    Firstly, how can I get the spinning rollover icons on your page? When I right click on the icons, it doesn’t allow me to save them or copy the URL address.

    Secondly, if they are not sprites, how will I structure my HTML and CSS so that I’m not repeating the same commands every time for each icon?

    As you can see, I’m no expert.

    I look forward to hearing your response, all the way over here in Melbourne, Australia.

    All the best,

    Darryl

    Reply
    1. Brad Knutson Post author

      What I meant by inspecting the element was in Firefox or Chrome you can right click on any HTML element (in this case, a div) and see the CSS applied to that element. The CSS would have the social media icons I used as a background image, so you could grab them that way. I hope that makes sense.

      Edit: I just got your email and I’m glad to find out that you’ve solved this one yourself! Kudos! :)

  30. Michelle Tan

    Hello,

    Thank you very much for this great tutorial. :) I am a total beginner when it comes to CSS and HTML and other coding and was looking for some animated social media icons so when I saw this, I was ecstatic. 😀 Also, is it possible for you to quickly make a blogger and bloglovin icon. I would love to do it myself but I’m a little bit of a noob when it comes to these technical computer things.

    Thank you so much!

    Reply
    1. Brad Knutson Post author

      Hey Michelle,

      Here is one for Blogger:

      Blogger Sprite

      I’m not familiar with BlogLovin – if you could point me in the direction of their logo I could whip something up for you.

      Hope that helps!
      Brad

    1. Brad Knutson Post author

      Hey Michelle,

      Here is the blogger icon

      As far as the Bloglovin icon, I don’t really see a logo for them – it seems like their logo is just the word “Bloglovin” and would make a icon kind of silly looking. Do they have an icon?

    2. Michelle Tan

      Hi Brad,

      Thanks for the Blogger icon! I have it up and running on my blog now. 😀 As for the Bloglovin’ icon, I think it’s a light blue icon with a + sign (just like their favicon).

      Thanks,
      Michelle

  31. David

    This is great stuff Brad. Thanks for sharing. I assume that if I just wanted a simple fade from a b/w icon to a colorized I could probably just use the rotating icon code and just remove the transitions. Does that sound right to you?

    Reply
    1. Brad Knutson Post author

      You could certainly do that, but it will not be a “fade” it will be more abrupt. If you’re ok with that, go for it – if you want a fade transition, check out my blog post Fade One Image Into Another – I provide a jQuery solution and CSS solution.

      Thanks,
      Brad

    1. Brad Knutson Post author

      If by button you mean a link you’ll need to surround your code in an anchor tag.

  32. Paul Lucas

    Hi Brad,

    Thanks for a great tutorial!

    If possible could you please create circular icons for email (colour and grayscale), graphics isn’t my strongest point!

    Thanks

    Paul

    Reply
    1. Brad Knutson Post author

      You absolutely could use icon fonts! In fact, that is a method I prefer because it makes transitions that change the color of the icon and the background independently that much easier!

      The first example in this post (the slide rollover animation) is probably best done with sprites, but the other two could easily be done with icon fonts!

    1. Brad Knutson Post author

      I don’t have a colored and grey icon, but I just found this online. Go ahead and make yourself one!

      Mobile Icon

  33. Vadim

    Great work and thank you for making this so simple!!! Also thank you for being so helpful and responsive. The other comments helped me get it to work on my site.

    Reply
    1. Brad Knutson Post author

      You’re correct, the fact my site is built on WordPress is irrelevant for this effect. It’s just regular CSS.

  34. Gerhard

    Hi Brad, thanks for the post most helpful.

    How do I change direction of movement? I’m working with the social icon code. Is there any where you can recommend to get a proper advanced css course? How did you get into it?

    Reply
    1. Brad Knutson Post author

      Gerhard – you can change the direction of the movement by playing around with the background position of the icons.

      As far as learning CSS, I personally think the best way to learn is just to read blogs (like http://css-tricks.com) and play around with it until you feel comfortable – I don’t think taking courses would be necessary.

  35. Thibaut

    Hello Brad,
    This article helped me al ot. Now, I have cool and nice social media icons on the article of my new blog (under Dotclear)
    Thanks a lot for the code and the icons !!!

    Reply
  36. Mariak

    Hi how do i link the icons to my social media pages like facebook and twitter here is the CSS:

    }
    /*—Social icons—*/
    .tb-social ul li{
    cursor: pointer;
    display: block;
    float: left;
    height: 34px;
    line-height: 34px;
    width: 25px;
    }
    .tb-social .ic-fb{
    background: url(“../images/ic-social.png”) repeat scroll -10px 0 transparent;
    }
    .tb-social .ic-fb:hover{
    background-color:#314a87;
    }
    .tb-social .ic-tw{
    background: url(“../images/ic-social.png”) repeat scroll -67px 0 transparent;
    }
    .tb-social .ic-tw:hover{
    background-color:#22bbf4;
    }
    .tb-social .ic-gp{

    background: url(“../images/ic-social.png”) repeat scroll -117px 0 transparent;
    }
    .tb-social .ic-gp:hover{
    background-color:#ff5c93;
    }
    .tb-social .ic-rs{
    background: url(“../images/ic-social.png”) repeat scroll -38px 0 transparent;
    }
    .tb-social .ic-rs:hover{
    background-color:#fd7704;
    }

    .tb-social .ic-yt{
    background: url(“../images/ic-social.png”) repeat scroll -94px 0 transparent;
    }
    .tb-social .ic-yt:hover{
    background-color:#d72a25;

    Reply
    1. Brad Knutson Post author

      In the HTML, surround the icon divs with anchor tags, linking to your social profile pages.

    2. Mariak

      Hi should I add it here?

      }


      background: url(“../images/ic-social.png”) repeat scroll -67px 0 transparent;
      }
      .tb-social .ic-tw:hover{
      background-color:#22bbf4;

    1. Brad Knutson Post author

      Nope you are confusing CSS and HTML markup. Links require an anchor tag to surround whatever text, image or element you want linked.

      Depending on where your files are in your Joomla theme, you’ll want to find the module that contains the code for the social icons. http://docs.joomla.org/Module

  37. Ali

    Hello Sir! Thanks a lot for this great stuff.
    Whenever I try to create a link, the first icon does not respond while others do well. E.g when i start with fb then twitter, twitter will work but fb wont and vice versa. Please help.

    Reply
    1. Brad Knutson Post author

      That can happen when you set the href to “www.twitter.com…” as opposed to “http://www.twitter.com…” – hope that helps!

  38. Scott

    Thanks for sharing Brad. I used the spinners but mine are a little jumpy.. and not as seemless as yours. Can you take a look.. Still working on site but they are in first section of page.

    http://loyalwifi.com


    /*Social Icons Not Hovered
    -------------------------------------------------------*/
    .facebook_gray {
    background-position: 0 -53px;
    width: 48px;
    height: 48px;
    margin: 10px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    }

    .gplus_gray {
    background-position: 0 -159px;
    margin: 10px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    }

    .linkin_gray {
    background-position: 0 -265px;
    margin: 10px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    }

    .twitter_gray {
    background-position: 0 -371px;
    margin: 10px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    }

    /*Social Icons Hover
    -------------------------------------------------------*/
    .facebook_gray:hover{
    background-position: 0 0;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    .gplus_gray:hover{
    background-position: 0 -106px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    }

    .twitter_gray:hover{
    background-position: 0 -318px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    }

    .linkin_gray:hover{
    background-position: 0 -212px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    }

    Reply
    1. Scott

      Forgot this part of the css…


      /*Social Icons
      -------------------------------------------------------*/
      .facebook_color,
      .facebook_gray,
      .gplus_color,
      .gplus_gray,
      .linkin_color,
      .linkin_gray,
      .twitter_color,
      .twitter_gray {
      background: url("http://loyalwifi.s3.amazonaws.com/socialsprites.png") no-repeat top left;
      width: 48px;
      height: 48px;
      }

      Html

    2. Brad Knutson Post author

      I’m not seeing the social icons on your site – can you put them up on JSBin or JSFiddle for me to look at?

      If the CSS transitions are jumpy or abrupt, it’s possible that the transition property is being applied to the incorrect selector.

  39. Kerala recipes

    This is amazing and extremely useful. Special thanks for the additional RSS sprites. Just to bing to your notice that, there is a little difference between the grey shades for twitter and other social icons. You can see it here http://www.cheenachatti.com/
    Sorry, to bother you. But if you have the psd’s can you please update it?

    Thanks a lot for the code and resources :)

    Reply
  40. Erick

    Hi, is there a reason why I cannot see the rollover with internet explorer 8? is this not supported on this version? is this supported in other versions?

    I can see the sliding effect in other browsers (firefox and chrome) just not on this one.

    finally how to do remove the space between the icons caused by the

    thanks

    Reply
    1. Brad Knutson Post author

      The smooth transition effect does not work in IE8, but the image position should change so the grey image should change to the colored image portion of the sprite.

      You can remove the space between the icons by changing the margin.

    2. Erick

      Thanks. I do see the color change, just not the sliding effect. Is it possible to see it in IE9?

      How do I change the margin? This is my code:

       

      <a href=”#” rel=”nofollow”></a>
      <a href=”#” rel=”nofollow”></a>
      <a href=”#” rel=”nofollow”></a>
      <a href=”#” rel=”nofollow”></a>
      <a href=”#” rel=”nofollow”></a>

      BTW, you did a great job!

    3. Brad Knutson Post author

      The CSS transition won’t work in IE9 but the rest should work just fine.

      To change the margin, modify the margin for the contain div right in the CSS.

  41. Ashley

    Hi, I’m trying to post this on my personal website and am having major issues, not really sure if I messed up the css or the HTML but would love some help, the buttons aren’t showing up at all. Please e-mail at apetty23@aim.com

    Reply
  42. Dude Jaway

    I’ve been looking for great social networking sprites and code. Thank you Brad! I’m in the process of completing my new website and this is exactly what I was looking for. I was born/raised in Burnsville, MN, now in Boise, ID. Unimportant F.Y.I…:) I look forward to making this work. Thanks again and continue to create excellent work.

    Reply
  43. Michael Salamander

    You’ve got an awesome page here! I’m trying to get your tutorial working on my code at the moment but I don’t know how to handle it.
    I’ve generated circulate images with CSS (width: 150px; height: 150px; border-radius: 75px;) and want the slide rollover animation on them. Could you tell me how this is possible? I’ve linked my page in the description. Thanks in advance!

    Reply
  44. Fotis

    i am amazed with your work, well done and thank you!

    i am trying to use the code, which is great, but my problem is that the icons are visible at the right side of my blog.
    Wherever i put my div, the icons are still in the right side as you can see below.

    Why is that? maybe i have previously set somewhere an attribute that leads to this but… Maybe you have an idea..

    Thank you again!

    Reply
    1. Brad Knutson Post author

      It’s probably because he CSS I had for the icons is set to float right, so it’s naturally floating to the right of the element to place it next to. Try removing the float property and see what happens.

    2. Fotis

      Yes it’s ok…! Now if i want to change some details like the background color i should place an attribute like background-color:#blabla; ,right?

      I tried that, but it changes the icons’ background and not the whole part of div. So, where it should be placed in order to have the icons, let’s say, in a blue background?

    3. Fotis

      It seems that i solve my problem using the code this way.




      and then


      #custom-header {

      background-color:#ahex;
      text-align: right;

      }

      .social-slide {
      height: 48px;
      width: 48px;
      margin: 3px;
      display: inline-block;
      -webkit-transition: all ease 0.3s;
      -moz-transition: all ease 0.3s;
      -o-transition: all ease 0.3s;
      -ms-transition: all ease 0.3s;
      transition: all ease 0.3s;
      }

      .social-slide:hover {
      background-position: 0px -48px;
      box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
      }

      .skype-hover {
      background-image: url('http://bradsknutson.com/wp-content/uploads/2013/06/skype.png');
      border-radius: 50%;
      }

      .linkedin-hover {
      background-image: url('http://bradsknutson.com/wp-content/uploads/2013/05/linkedin-hover.png');
      border-radius: 50%;
      }
      .twitter-hover {
      background-image: url('http://bradsknutson.com/wp-content/themes/bradsknutson/images/twitter-hover.png');
      border-radius: 50%;
      }
      .facebook-hover {
      background-image: url('http://bradsknutson.com/wp-content/uploads/2013/05/facebook-hover.png');
      border-radius: 50%;
      }

      Thanks Brad for your help!! Happy new year!

  45. spanac

    Hi Brad!
    This is an outstanding job!
    I tried to make something simmilar for my wordpress blog but i’m a BIG noob at coding, css and php.

    i copied yout css code for howering în my style.css but i cant see the images anywhere.
    where to copy them exactly?
    i searched “sidebar” in the style.css and put the code there, after this code
    /* sidebar(primary) Begin */
    ….
    ….

    .widget a{color:#484848;}

    .social-slide {
    background-image: url(‘http://spanac.eu/poze/facebook-bun.png’);
    height: 48px;
    and so on, the code for a single image.
    but nothisg shows on my theme.
    can you help me further please?

    Thank you so much!

    Reply
    1. Brad Knutson Post author

      Can you give me an example URL I could look at and trouble shoot? I’m not seeing the HTML that is required to display the icons on your site.

  46. spanac

    Hi again Brad. the code is in my style.css.
    i tried to put it in sidebar.php, but the whole sidebar was gone after that.

    i dont know where to put it exactly.
    in style.css, but where, im clueless.
    my website is spanac.eu
    Thank you!

    Reply
    1. Brad Knutson Post author

      You need to add the CSS to your stylesheet, then in the WordPress admin if you want it in the sidebar – add a text widget with the HTML structure and add it to the sidebar. That should do it!

  47. spanac

    i did it, but it shows a broken picture there. on my top position in sidebar.
    im just too dumb…
    i send you an e-mail via contact form, if you want to help me step by step i will owl you big time.
    Thank you

    Reply
  48. Cheryl

    Thank you so much for the excellent information and all the help you provide as we implement it! I scrolled through the comments and didn’t see anyone else ask about how to display icons in more than one row…. I added break tags to split 6 icons into two rows, but I have been trying all kinds of CSS to try to get each set of 3 to center in the area where they are being displayed, with no luck at all. (And if I take the float:left; off the social-slide CSS, they show up in a single vertical column… any ideas for me?? Thanks in advance!

    Reply
    1. Brad Knutson Post author

      Hey Cheryl,

      Two get the icons to display in two rows, you’d want to surround each group of 3 icons (each row) with a container element. If you don’t give the container element a set height, you’ll also want to clear the floats after each container element to make sure it displays right.

      Hope that helps, let me know if you need more explanation!

    2. Cheryl

      Wow, that was quick – thank you!! If by a container element, you mean another div around each set of 3, that is one of the things I tried… would I need to specify certain styles on the container (div?) element? The div that the icons already sit inside of has a width and text-align:center. The site I’ve been working with is test.cdapresents.com and they are at the bottom left of the page (in the “bookmark” type area on the left of the page).

    3. Brad Knutson Post author

      Cheryl – I think you’re really close. You have the first 3 icons in a container div, but the second 3 are not. Try removing your line breaks, giving your container element the height of your icons (30px), and surrounding the second 3 icons in a container element with a height of 30px also (you can add padding-right also so that it lines up). That should do it!

    4. Cheryl

      I had both sets in their own div but as I was trying different things, I had taken the other one out and just had the one I was working on trying to get it centered. So I have both back in now and took out the hard breaks but the first one is at the left side of the area and the second row is at the right edge. I am trying to figure out how to get both rows to be centered in that “bookmark” area. I can put in padding to push it over, but that felt like just a “hack” instead of a real method to me. :(

    5. Brad Knutson Post author

      I slightly miscalculated. Give each container div style=”margin:auto;height: 35px;width: 100px;” and it should work. Adjust the height and needed to give added space between the rows.

    6. Cheryl

      That works – thank you so, so much!! Is that the only way to force it to center? A “hardcoded” px width seems very static to me – if I ever decided to have 4 in each row, I would need to adjust that. I guess I was hoping that there was some way for it to just take the content it had and center it in the parent element… but since I’ve been banging away at this for a while, I’ll take it! Thanks again for your super fast replies and all the help – really appreciate it!!!!

    7. Brad Knutson Post author

      A hardcoded width on the container element is the easiest and most cross-browser compatible solution I’m aware of. If you find another, be sure to come back and share it!

    8. Cheryl

      Okay, I totally trust you! I’m self-taught on CSS and fully aware that there are HUGE gaps in my skill and knowledge levels!! And I quickly realized that it’s a common issue many people are plagued by, so I’m not surprised that there isn’t one “sexy” catch-all way to center stuff in this kind of situation.

      Thank you again so much for your help today!!

  49. AnthonyV

    Hey Brad!

    I found this and I’m instantly impressed by it! I tried implementing it into my site and unfortunately I can only get one to work correctly. if I try to add more than one the images will all be the same. So for example: the Facebook icon will be on both the facebook and the twitter icon. Any idea what’s wrong?

    Reply
    1. Brad Knutson Post author

      Hey Anthony,

      If you’re using the first example, then remove the image from the .social-slide CSS block. Add a unique class to each social icon so you can call the social network image individually. For example, add a class of “social-fb” to the div that you want your Facebook icon to display, then add this CSS:

      Hope that helps!

    2. AnthonyV

      thanks for the really fast reply!

      so my html looks like this:

      About

      Gallery

      Tutorials

      Voice

      Contact

      And my CSS for the two buttons looks like this:

      .social-fb {
      background-image: url(‘facebook-hover2′);
      }

      .social-slide {

      height: 30px;

      width: 30px;

      margin: 2px;

      position: relative;

      top: -110px;

      right: 10px;

      float: right;

      -webkit-transition: all ease 0.3s;

      -moz-transition: all ease 0.3s;

      -o-transition: all ease 0.3s;

      -ms-transition: all ease 0.3s;

      transition: all ease 0.3s;

      }

      .social-slide:hover {

      background-position: 0px -30px;

      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.8);

      }

      .social-slide {

      background-image: url(‘twitter-hover2.png’);

      height: 30px;

      width: 30px;

      margin: 2px;

      position: relative;

      top: -110px;

      right: 10px;

      float: right;

      -webkit-transition: all ease 0.3s;

      -moz-transition: all ease 0.3s;

      -o-transition: all ease 0.3s;

      -ms-transition: all ease 0.3s;

      transition: all ease 0.3s;

      }

      .social-slide:hover {

      background-position: 0px -30px;

      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.8);

      }

      Is that right? I tried it and it wasn’t switching the image.

    3. Brad Knutson Post author

      It’s easier for me to explain if you can look at the HTML and code. Here is what I’m using for the example in this post:

      http://jsfiddle.net/L6vbb/

      See how I give each div it’s own unique class, and they all share a class as well? This way we can apply styles to all social icons at the same time, and map the path to the image icon individually.

      Hope this helps!

  50. Markus

    Hi Brad!

    Would you mind giving me the round png:s for Facebook, Twitter, Pinterest and instagram?

    Thanks in advance

    Reply
    1. Brad Knutson Post author

      Hello Markus – you can get the images right off this page by inspecting the elements and looking at the CSS. If you’re not able to do that, let me know and I can post them for you.

  51. Rajesh

    hi Brad,
    can you plaese help me on this…
    i have an image both width and height 200px.i wanted to use Spinning rollover animation as you tought above. but unable to do so……here is my code
    .social-roll {
    background:url(../images/img.png);
    height: 213px;
    width: 100px;
    margin: 10px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    margin: 186px 0px 0px 278px;
    }
    .social-roll:hover {
    background:url(../images/img.png);
    box-shadow: 40px 0px 4px 1px rgba(0,0,0,0.8);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    }
    can you plzz help mee on this. :)

    Reply
    1. Brad Knutson Post author

      You’ll want to wrap the social icons in a container element, and place the HTML where you want the icons to appear. Because you don’t have a container element, the items are floating to the left of the space you want to place them.

    1. Brad Knutson Post author

      Just wrap your social icons in another div – then place the entire HTML code block where you want it to appear.

  52. JOEL

    Good morning Brad,

    This is awesome, just what I’ve been looking for. A rollover sprite for Instagram. Is it possible you could whip something up for me? However, can the colors of the sprite be inverted. So they will appear boxless until they are rolled over?

    Can you make icon image & code for:
    Instagram
    Facebook
    Flickr
    G+
    Rss
    Twitter
    Vimeo
    Youtube
    Tumblr

    Reply
    1. Brad Knutson Post author

      Oh, come on now – creating them yourself is half the fun! I’m not a designer or anything special :)

  53. Amit Srivastava

    Hello there! thanks for this great tutorial / information / coding! I’ll be checking in to learn more tips and tricks!

    Reply
  54. Suri

    Nice work Mr. Brad kutson,I have added your code css and html, what you have given above for slide icons but they are not showing properly. when cursor moves on that place then only structure shows but not the real image. Please will you check that where i am going wrong. Please help me.

    css( which I used) is:

    And HTML(Which I used) is:

    Again I tell you that when mouse cursor goes to the icon place ,only structure is showing not the exact icon given on your website. I think the problem is in html. Please tell me what changes i have to do or give me the exact code just indicate the link place so that i can easily use my link also. Thank you very much.Please help.

    Reply
    1. Brad Knutson Post author

      Hello Suri,

      You need to save the images in your image directly, and name them correctly – in order for this to work. If everything works but the icons aren’t showing up, you’ll need to download the sprites (you can find them in various comments on this page), save them in your images directory, and double-check the path is correct.

  55. Suri

    Thanks for reply. Mr. Kutson. I want to tell you that I have added some other social icons on my website through css code and html before coming to your website and just by css code and html code my all icons were properly showing with hover effect and i did not upload any images saperately for this. All work has done by html and css and icons were working correctly. so only html and css are sufficient to show correct icons and to work properly but you said that images are required to upload accept these codes(CSS and HTML).Because I have not the deep knowledge of coding so please if you can give me css and html codes completely with images in html code for pop up icons given on your site then I will be very much thankful to you. Its a humble request.
    Thanks again.

    Reply
    1. Brad Knutson Post author

      Do you mind sharing a link with me where I can troubleshoot your code?

  56. Peter Newman

    Brad I am very new to any of this website development WordPress => cheating :-) but it is just so much fun and I cannot wait to have a go at implementing some of your ideas into my site. When I started looking at some interesting customisations for social icons I am so glad that I came across your site. Congratulations on your clear and concise instructions and the tireless help and support that you give people. You are truly a saint.
    Thanks Pedro.

    Reply
  57. Peter Newman

    After reading your extensive question and answer series on your codes I managed to get both the social-roll and social-popout working on this minimalist website that I am learning on. http://pedrosdigitalsolutions.com/ The social-popout I got working well with round icons (all round except square youtube icon) but for some reason the social-roll version displays square bordered, round icons even though both versions use exactly the same set of icons. I cannot work out why this is happening Brad, and I was hoping that you might be able to offer me a few clues. I have posted the full css and modified HTML applied the the header.php files of the Responsive, child-theme of my WordPress website on GitHub
    https://gist.github.com/Pedro147/9446595
    Thanks again for the generous offers of help that you extend to all who ask here,
    Pedro.

    Reply
  58. Ben

    I have hopefully a simple question.. im going to be using the rollover version and i noticed each sprite is 48×48 now lets say i have three icons that are 48×48 ex: Facebook, twitter,vimeo. but lets say i want to add my twitch logo there how could i make one div display say 4x the original width so its width is no longer 48 but 192.. is that possible here or would i need a special class of some sort im a newbie at css

    thanks

    Reply
  59. Jaye

    I finally got the rollover icons up but would you be able to tell me how to get them centered as when I do it, it puts them in a single vertical line.

    J

    Reply
    1. Peter Newman

      Jaye – as you can see I am asking for advice myself, but I have been playing around with all three versions of Brad’s social icons (on my two WordPress sites) and if you post your full code on Github or the like I will take a look. I have only been playing around with this website stuff for a few weeks but I am keen to learn

    2. Brad Knutson Post author

      Hey Jaye,

      If the icons are in a vertical line, you’ll need to add float: left; to the style block for each icon. This should position them in a horizontal line. Add margin to space them out as you see fit.

      Good luck!

    3. Jaye

      What’s the style block?

      This is the beginning of my code, where would I put it in here?

    4. Brad Knutson Post author

      Use something like this for your .social-slide class:

  60. Peter Newman

    I finally got my social roll code sorted out and I once again thank you for your excellent article. I must however point out that I am a little disappointed that I was offered no help whatsoever even though I know that you still monitor this thread and offered someone else advice within half an hour of them posting a question. Oh well like I told you previously you don’t owe me anything so have a nice day Brad

    Reply
    1. Brad Knutson Post author

      Hey Peter,

      Sorry about not responding, I occasionally miss a comment here and there – so when I saw your comment about trying another social slide and persistence paying off, I assumed you got it working properly. Sorry about that! If you ever need any help with any of my posts, you can always reach out to me via email (available at the very bottom of every page on this site).

      Sorry again! Hope everything is working great for you!

  61. Peter Newman

    Thanks Brad and I am sorry if I came across as being a bit peeved. As I stated previously I sincerely thank you for your generosity and all the help and advice you offer here. You have a great day. Pedro.

    Reply
  62. Bryan

    Hi Brad,
    Thank you for the very cool examples. I am trying to get the popout icons working on my wordpress site in the sidebar. I added the html code to a text widget and the css code to my custom css section under appearance -> theme options. I am only testing at this point with the twitter icon and it does show up but does not pop out as it should. Can you take a look at my site and see where I went wrong? Thanks again for the examples.

    Reply
    1. Brad Knutson Post author

      Hey Larry,

      It doesn’t look like any CSS is being applied to the icon, which is why the popout effect isn’t working. Try adding it to your theme’s main stylesheet.

      Also, a friendly suggestion – your sites background image is insanely large! Optimize it so your pages load faster! :)

    2. Bryan

      Thank you for the quick reply Brad. I got the popout working (typo’d the class name in the html) but I am not able to get the icons to line up horizontally in the widget even though the css has float: left. Any ideas?

    3. Brad Knutson Post author

      Hey Bryan,

      Looks like your HTML is a little different than mine. You have used a div with class “social-popout” as a container for all your images, where I wrapped each image link in a div with that class. That’s why your CSS isn’t performing properly.

    4. Bryan

      Thank you for help Brad. The icons are now working! Also, thanks for the tip on the background image. I decreased that bad boy by about 80%! :)

  63. Rob T-B

    Hey Brad, just wanted to show gratitude with a big thanks 😀 Im using this on our site with no probs. Works mint =)

    Reply
  64. Tony

    Hey Awesome article. I’m having a strange problem though. Everything works fine if I include the style rules internally in the section.

    I am using Bootstrap 3 and If I link to an external style sheet it doesn’t work. All the paths are correct because I am sucessfully overriding the default Bootstrap rules.

    Externally, the image “appears” but it is all white. Strange.

    Link to code: http://jsbin.com/UFoRIYex/394/edit

    If you have advice I would appreciate it. Thanks!

    Reply
    1. Brad Knutson Post author

      Hey Tony,

      I saw your post about this on StackOverflow. Was this resolved by modifying the path to the image in your CSS?

  65. John Herron

    Brad,

    For starters I just want to say that you have put together some great work! Thank you for allowing us to use it. I have a quick question, How do I link my email address?
    I linked my other icons shown below with their proper address as you demonstrated earlier in this feed.

    However, I cannot get the email icon to link to my email. Any suggestions?

    Thank you,

    John Herron

    Reply
    1. Brad Knutson Post author

    1. Brad Knutson Post author

      Hello Ali – all you have to do is wrap the icon in an a tag.

    1. Brad Knutson Post author

      Hello Shahdab – all you have to do is wrap the icon in an a tag.

  66. Jamie

    I’ve got to say I’m pretty impressed, Brad. Not just with the coding but with your tireless support and responses. Well done!

    Reply
  67. Fred

    I don’t use in place where I want to put animation. Is there any way to incorporate this CSS code into ?

    Reply
    1. Brad Knutson Post author

      Hey Fred, I’m not sure what you’re having trouble with, can you elaborate?

      Thanks,
      Brad

    1. Brad Knutson Post author

      Fred – first of all you are closing the anchor tag before the image – so your code won’t work. This example will work just fine if you surround the icon with an anchor tag, I’m doing it in the footer of this website. Just follow the examples in this post (the CSS) and wrap your icon in an anchor tag. The icon will have the correct hover effect and also be a link.

    2. Brad Knutson Post author

      Fred – like I said, there is nothing complicated about what you are trying to accomplish. This post will walk you through how to accomplish the hover animations. If you then surround the entire div with an anchor tag (an a tag), the animated icon will not only preserve it’s hover animation, but it will also be a link.

      There is a live example of this in the footer of this website. Scroll down the page and you’ll see it – you can use the browsers inspect tools to break down line by line how it works if you’d like.

  68. Ebi

    Excellent, Excellent, Excellent. The slide effect worked on first try! amazingly beautiful technique, and you, Sir are an excellent tutor. Love this tutorial and especially your responses. I have learnt so much also from the explanations in your responses. Thank you, Sir.

    Reply
  69. Joy

    Thanks for sharing, you are a star! I have been looking for this type of tutorial for ages, given up on sprite as it was very tricky for me. In the end I have to abandon sprites as it wasn’t responsive friendly and with the little css coding knowledge I know I guess this was the best compromise I found on the net. By the way I used your pop out combined with my own images and it was just magic :)

    Reply
  70. Jack

    Hi Brad,

    What a fantastic find you are!
    I’m an extreme newbie to CSS and HTML, but you have exactly what I’m looking for for. I have built a couple of sites with a program called Quick N’Easy Web Builder and it does what I need it to with a wysiwyg editor that converts to html. It also uses JQuery, which is what I am asking about. I noticed that someone else has already asked but he had you send them to his email address. Do you have a JQuery version of these? You can just post here and maybe others will find it useful too.

    Twitter
    Facebook
    Youtube
    Vimeo
    and eventually:)
    Pinterest
    Email
    Thank you for the awesome blog and sorry for the long post.
    Jack

    Reply
  71. Katy

    This is awesome work. Thanks so much for your generosity in sharing this with the world! I will definitely be utilising them on several of my client’s sites.

    Reply
  72. Nige

    Hi Brad, fantastic work, thank you so much for this post.
    I have an issue I hope you can help with.

    Everything displays fine with Safari but when using Chrome some of the sprites fail to show.
    Any ideas?

    Thanks again!
    Nigel

    Reply
  73. Jatin

    Wow! Awesome work Brad! and a great explanation on sprites as well.
    I just had one request if you don’t mind. Is there a way you can share the email-hover (square png) but with gray on top and color at the bottom, like the other icons?
    You’ve done a great work! Super!

    Thanks,
    JP

    Reply
  74. Todd Matzke

    Brad.. Thank you for all the patience and help you have given others. I appreciate this code and images. Great work!

    Todd M

    Reply
  75. Jill

    Love it and it works great but I’m wondering if there is a way to get them centered. I get that the float keeps them on the same line but when on a sidebar they are then aligned left and I would love for them to be centered.

    Reply
  76. srinivas

    I want code when page scrolls down social media icons falls down please give in detail and send me a mail also

    Thank you

    Reply
  77. Noémia

    Hello:

    Just to say thank you for the wonderful tutorial. If I may just make a small critique, I believe it is written for people that are really confortable with css and html already. Only reading the comments sections I understood the image desing in photoshop, the coding for different buttons, and so on 😉 Wich leads me to another point, thank you for your patience in answering and explaining everything so well as you did 😉

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">