Skip to main content

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://1.bp.blogspot.com/-leSBZibeu5M/WUNdh5YGaaI/AAAAAAAAPEM/w9aWDEUfVjwnMorbHd0EYuIc3wgX0wo8QCLcBGAs/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://3.bp.blogspot.com/-S3bv_9E4a5o/WUNdlggX6-I/AAAAAAAAPEw/2ipAApzSYCMWKIl0DsqDOYPWyWWyVSsnwCLcBGAs/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://2.bp.blogspot.com/-XzrFLmmHMDQ/WUNdiFaKbxI/AAAAAAAAPEU/dQPkhg5yC6AyZE9hrW1EecpExo4GaOo4QCLcBGAs/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://4.bp.blogspot.com/-ZXkFGtnoX00/WUNdijWzRsI/AAAAAAAAPEY/0HajV8T_XjQWD7AWT_PpEmVaET-5jGqdACLcBGAs/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://1.bp.blogspot.com/-i5nsxLozWAM/WUNdjnOCn3I/AAAAAAAAPEg/25E8nSqylWAIaf4CCcYRcBPKPMegR1SwQCLcBGAs/s1600/linkedin.png" /></span></a>
        </li>
        <li class="bhero-s1">
            <a href="
#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://1.bp.blogspot.com/-HpkZLVfvv-o/WUNdlgfywjI/AAAAAAAAPE0/3Cbfhy_AtXwRaugcolEILAYmJN8zZhzJwCLcBGAs/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://3.bp.blogspot.com/-WGx9AQ9LPmU/WUNdiKefccI/AAAAAAAAPEQ/cdrLAdFC2dEd8cDyo3d_3VxJkkAnjvE9gCLcBGAs/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://3.bp.blogspot.com/-lKWhyuESFoY/WUNdkRVfGOI/AAAAAAAAPEo/wk9vs2hJBHwF3tqhy23Pjm93aqXwjq3iwCLcBGAs/s1600/pinterest.png" /></span></a>
        </li>
    </ul>
</div>

Comments

Popular posts from this blog

4) Real Social Media 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; …

5) Prism Social Media 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: …