Display SocialMedia Icons using CSS3

In this post I want to explain about hoe to Display Socialmedia Icons using CSS3.Use this simple CSS and enrich your websites.

Live DemoDownload Script

HTML

<li class="facebook">
        <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
 </li>

Call background image for facebook using the below CSS

CSS

li.facebook { background-image:url("../images/facebook.png"); }

To display social media name and hide other icons use the following css codes.opacity is used to apply transparent to other icons.

Full Code for Hover

#css3:hover li { opacity:0.2; }
#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#css3 li:hover { opacity:1; }
 #css3 li:hover a strong { opacity:1; top:-10px; }

Please share your comments and feedback.Thanks.Please subscribe my updates via email.