1) Simple Elegant Icons

• 
• 
• 
• 
• 
• 
• 
• 

Copy the Following Code :

<style>
    * {
        box-sizing: border-box;
    }
    #bhero-cssanime:hover li {
        opacity: 0.2;
    }
    #bhero-cssanime li {
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 500ms;
        -moz-transition-property: opacity;
        -moz-transition-duration: 500ms;
    }
    #bhero-cssanime li a strong {
        opacity: 0;
        -webkit-transition-property: opacity, top;
        -webkit-transition-duration: 300ms;
        -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms;
    }
    #bhero-cssanime li:hover {
        opacity: 1;
    }
    #bhero-cssanime li:hover a strong {
        opacity: 1;
        top: -10px;
    }
    /* Mobile Responsive */
    
    @media only screen and (max-width: 900px) {
        ul.bhero-s1-social {
            margin: 6% 5%;
            float: none;
            padding: 0!important;
        }
        li.bhero-s1 {
            width: 50px;
            height: 50px;
            margin: 5px;
            list-style: none;
            display: inline-block;
        }
        li.bhero-s1 {
            width: 55px;
            height: 55px;
        }
    }
    @media only screen and (min-width: 900px) {
        li.bhero-s1 {
            list-style-type: none;
            width: 50px;
            height: 50px;
            list-style: none;
            display: inline-block;
            margin: 2px;
        }
    }
    /* START TOOLTIP STYLES */
    
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        
        font-size: 14px;
        /* opinion 3 */
        
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        /* most of the rest of this is opinion */
        
        font-family: Helvetica, sans-serif;
        text-align: center;
        /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
        
        min-width: 3em;
        max-width: 21em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: #333;
        color: #fff;
        z-index: 1000;
        /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
    
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: calc(100% + 30px);
        border-bottom-width: 0;
        border-top-color: #333;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 35px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -20px);
    }
    /* FLOW: DOWN */
    
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #333;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #333;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #333;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    
    @keyframes tooltips-vert {
        to {
            opacity: .9;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: .9;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
</style>



<br />
<div id="social-1">
    <ul class="bhero-s1-social" id="bhero-cssanime">
        <li class="bhero-s1">
            <a href="Your-Link-Here#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjoHmp2fjD0NsYEnYimR2s4TcccFm9KTx9JbCpGbCEDgUeNExhkuuzDPnC940R8iiwkLI02UBqr5DMA1c9XnlmoJvli-SSR4ooZPw1BRVPdTIw3rEsxWmaMH642JXiYoAL6Qxyj42MrE/s1600/facebook.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29Mn7zUMxddc4X0RU6l-vw4US_iza79dQ-FWkNrK5Y4XlCdshK937md_O_PPAH9t2X9FQ2lR70nuQda8tzxBWa8ZVWIQYQCHGy8PRmqa-X5cNvH2qqvHId3bqQovfU79SaSxB-UoNBdc/s1600/twitter.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvEwdwvjQV_zXQptP7nUm4V4x-ePJBB1BsSaxhezbCyeZd4Itq6M2r4TiRIdOREC8P6WsyuQ5Xwu-y94UE5QYuwwijFOUgN5WZnunnprOVm0ddwAwkzeFvJF1WyaIyCGuSMGV1hEbxe0/s320/google-plus.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmc4Yu6jUfwKFaBGTRS4rLjIUOPiJjwd_iETc-P2J-5RFUEzYVslTNYF-9raEt3rp5FgTrVisNhZIavh-UWZDkg3aDhKyV5a72Z3SgFH_-tQvYa3Cqmfjb-SskCEcw3iSzPaxnQwOuyig/s1600/instagram.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Connect on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mKOFjitOcaFHCW0QtPQxOqRSeAvCUYtSNkYAJr3vXW2InbTOmblEyB_zY54IJBJHR3ifZbBvC15bpmChPR-Sz5b3rRPH5kaa65VPGJ2T4wQ4ZLvAKAf_vAsoMW1kvJPtfMVunis9HGc/s1600/linkedin.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="
#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO-0TQeSzHtro3kbtDKf1No79oWJzAotXVa6d-h2WQ9F57B-pJM4gBKXPrpKlSTRRUx93BAyy44ChCxQUG_1wzdhwJtzUHm51s-718NTgCndl-MPKR9YP06cPeQVPzVa1m4tyVPbhgDSw/s1600/tumblr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Find on Flickr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFPaG8JA5Aw2dYAGrxMiHlZ2VxVni_XlZ1-1NJBEeIBZo6Fpu23ySGbsixcO7AIvoU4hu1swnWvKrKPdcB_OopZ8GyiURla_8F0HAGCQhgMK00Z4eBzVknRbrp_9rFwFkZUhHU2daRnOs/s1600/flickr.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3yozzjfSuXoYs8t7VUNlOczxUoANaoU8GTav7MVZileFvGiUOEBCwCcOaszWkzdbUumz7DxvXlVz6TcSwuALMH2nnyUS0GOdXtS0frGURlU2Z18pt3mmX5ehMZ_-rea4bLoWp07lr28E/s1600/pinterest.png" /></span></a>
        </li>
    </ul>
</div>