JSFiddle - React, Tailwind, and code Playground

Social Icons Display Using CSS3

by Jennifer Perrin

HTML

<h3>Pure CSS3</h3>
<!-- Social Media Buttons - CSS3 -->
<ul class="social" id="css3">
    <li class="delicious">
        <a href="http://www.delicious.com/"><strong>Delicious</strong></a>
    </li>
    <li class="digg">
        <a href="http://digg.com/"><strong>Digg</strong></a>
    </li>
    <li class="facebook">
        <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
    </li>
    <li class="flickr">
        <a href="http://www.flickr.com/"><strong>Flickr</strong></a>
    </li>
    <li class="linkedin">
        <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
    </li>
    <li class="reddit">
        <a href="http://www.reddit.com/"><strong>Reddit</strong></a>
    </li>
    <li class="rss">
        <a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
    </li>
    <li class="twitter">
        <a href="http://twitter.com/"><strong>Twitter</strong></a>
    </li>
</ul>
<!-- /Social Media Buttons - CSS3 -->

<h3>jQuery</h3>
<!-- Social Media Buttons - jQuery -->
<ul class="social" id="jquery">
    <li class="delicious">
        <a href="http://www.delicious.com/"><strong>Delicious</strong></a>
    </li>
    <li class="digg">
        <a href="http://digg.com/"><strong>Digg</strong></a>
    </li>
    <li class="facebook">
        <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
    </li>
    <li class="flickr">
        <a href="http://www.flickr.com/"><strong>Flickr</strong></a>
    </li>
    <li class="linkedin">
        <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
    </li>
    <li class="reddit">
        <a href="http://www.reddit.com/"><strong>Reddit</strong></a>
    </li>
    <li class="rss">
        <a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
    </li>
    <li class="twitter">
        <a href="http://twitter.com/"><strong>Twitter</strong></a>
    </li>
</ul>
<!-- /Social Media Buttons - jQuery -->

CSS

/* BASIC RESET */
 ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin:0;
    padding:0;
}

h3 {
    clear:both;
    padding:20px 0 0 60px;
}

/* SOCIAL ICONS - GENERAL */
 .social {
    list-style:none;
    margin:30px auto;
    width:464px;
}
.social li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
}
.social li a {
    display:block;
    width:48px;
    height:48px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
}
.social li a strong {
    font-weight:normal;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    padding:3px;
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75);
    background-color:rgba(0, 0, 0, 0.7);
    -moz-border-radius:3px;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius:3px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius:3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/delicious.png");
}
li.digg {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/digg.png");
}
li.facebook {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/facebook.png");
}
li.flickr {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/flickr.png");
}
li.linkedin {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/linkedin.png");
}
li.reddit {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/reddit.png");
}
li.rss {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/rss.png");
}
li.twitter {
    background-image:url("http://demo.marcofolio.net/social_css3_display/images/twitter.png");
}
/* SOCIAL ICONS - CSS3 */
 #css3:hover li {
    opacity:0.2;
}
#css3 li {
    -webkit-transition-property: opacity;
   ...

JavaScript

$(document).ready(function () {
    // Hide all the tooltips
    $("#jquery li").each(function () {
        $("a strong", this).css("opacity", "0");
    });

    $("#jquery li").hover(function () { // Mouse over
        $(this)
            .stop().fadeTo(500, 1)
            .siblings().stop().fadeTo(500, 0.2);

        $("a strong", this)
            .stop()
            .animate({
            opacity: 1,
            top: "-10px"
        }, 300);

    }, function () { // Mouse out
        $(this)
            .stop().fadeTo(500, 1)
            .siblings().stop().fadeTo(500, 1);

        $("a strong", this)
            .stop()
            .animate({
            opacity: 0,
            top: "-1px"
        }, 300);
    });

});