JSFiddle - React, Tailwind, and code Playground
HTML
<h3>Social Share</h3>
<ul class="social" id="css3">
<li class="delicious">
<a href="http://www.delicious.com/"></a>
</li>
<li class="digg">
<a href="http://digg.com/"></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/addfriend.php?id=beben.koben"></a>
</li>
<li class="flickr">
<a href="http://www.flickr.com/"></a>
</li>
<li class="linkedin">
<a href="http://www.linkedin.com/"></a>
</li>
<li class="reddit">
<a href="http://www.reddit.com/"></a>
</li>
<li class="rss">
<a href="http://feeds.feedburner.com/beben-koben"></a>
</li>
<li class="twitter">
<a href="http://twitter.com/bebenkoben"></a>
</li>
</ul>
CSS
/* SOCIAL ICONS - GENERAL */
.social {
list-style :none;
margin: 15px auto;
width: 90%;
}
.social li {
display: inline;
float: left;
background-repeat: no-repeat;
}
.social li a {
display: block;
width: 48px;
height: 48px;
padding-right: 5px;
position: relative;
text-decoration: none;
}
li.delicious {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/delicious.png");
}
li.digg {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/digg.png");
}
li.facebook {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/facebook.png");
}
li.flickr {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/flickr.png");
}
li.linkedin {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/linkedin.png");
}
li.reddit {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/reddit.png");
}
li.rss {
background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/rss.png"); }
li.twitter { background-image:url("http://www.htmldrive.net/edit_media/2010/201011/20101102/social_css3_display/images/twitter.png");
}
/* SOCIAL ICONS - CSS3 */
#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;
}