CSS design is a wonderful thing, if you know how to do it properly. Its like an Game that you can play and the results are awesome. Today I will show you some CSS 3 Slide social media icon. Social Media integration is an important step of gaining website popularity. Every websites is now have a branch in Social Media. Facebook, Twitter and Google Plus are the three major social media. Recently I have written a lot of post regarding the social media and share. These fancy social media link will make your site more astonishing. I have got the Idea, Code and images from http://bradsknutson.com. But it took me several days to understand how to use them effectively. I liked the Slide and Social Pop out links. So here are the summery with codes for novice users. I have collected all the images and put it in Zip file. Download them and upload it to your server. Also you can use imgur or minus like service, but I don’t think that is good. There are a lot of comments with helpful resources. Actually the comment section have more information than the post.
The thing I don’t like about them, is they are individual images. CSS Sprites will be more useful and SEO Optimized. There is a Comment with CSS Sprites. But I cant make that work in my testing site. You can also try that. Have a look at them here.
It is preferable to use the basic social media icons. Like Facebook, Twitter and Google Plus. You can use any other important social links such as Github, Linked In, Reddit, Stumble Upon, Pinterest, Instagram, Tumblr etc. I have collected all other social media link scattered in the comment. And compiled them in Zip file.
You can also use them to social share links. See here my previous post: Add Social Share Buttons Without Affecting Page Speed
Just Change the social link with the share link. Sharing link can be obtained from above link.
CSS Slide Rollover Animation Social Links
Add the below Code where you want to show them in your site. It maybe in the Footer, Widget or Above or Below post. To add in the Widget, just drag a Text box to sidebar and add the code there. Change the social link with your own. You can select what social link you want to show.
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. – Brad Sknutson
Each Icon has its own unique class and a shard 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.
Insert the below codes in your child themes style.css or custom.css in Thesis theme.
Do you want to reverse image, early image is original color and when mouse hove color will change grey?
Here is the code:
You can accomplish this by changing the background position. You can even use the same social media icon sprites in this example.
background-position: 0px 48px;
background-position: 0px 0px;
Download Slide Rollover Animation Images
Thanks, if you are having any problem, let me know in the comment. Also any suggestions to make them more useful. drop a comment please.