JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<div dir="ltr" style="text-align: left;" trbidi="on"> 
<ul id="bubble2">
<li>
        <a href="YOUR-TWITTER-LINK" title="Follow me on Twitter">
            <img alt="Follow me on Twitter" class="small" src="http://2.bp.blogspot.com/-5lLIsFYhSxg/T6y6NioRSII/AAAAAAAABc0/UWjU0JBr6tE/s1600/tw.png?w=96" />
            <img alt="Follow me on Twitter" class="large" src="http://2.bp.blogspot.com/-W4z7XWfbFt4/T6y6OfMRYcI/AAAAAAAABc8/Bvwc2wpG25A/s1600/tw2.png" />
        </a>
      </li>
<li>
        <a href="YOUR-FACEBOOK-LINK" title="I'm on Facebook">
            <img alt="I'm on Facebook" class="small" src="http://2.bp.blogspot.com/-3a-bCuAvy4I/T6y6J2NRfDI/AAAAAAAABcY/BY6yza0kN2k/s1600/fb.png" />
            <img alt="I'm on Facebook" class="large" src="http://2.bp.blogspot.com/-oRWlCfOSGZ0/T6y6K3b3-SI/AAAAAAAABcc/a_gk11FMC3U/s1600/fb2.png?w=580" />
        </a>
      </li>
<li>
        <a href="YOUR-FEEDBURNER-LINK" title="Full RSS Feed">
            <img alt="Full RSS" class="small" src="http://2.bp.blogspot.com/-ba427_tslj0/T6y6Lk_--yI/AAAAAAAABck/K53Pq-zDSOU/s1600/rss.png" />
            <img alt="Full RSS" class="large" src="http://2.bp.blogspot.com/-L1U4LDBTHNU/T6y6Mb7e5tI/AAAAAAAABcw/Zvh3s0M7ikw/s1600/rss2.png" />
        </a>
      </li>

CSS

#bubble2 { 
    list-style: none;
    margin: 20px 0px 0px;
    padding: 0px;
}
#bubble2 li {
    display: inline-block;
    margin: 0px 5px;
    padding: 0px;
    width: 72px;
    height: 72px;
}
#bubble2 li a img {
    position: relative;
    border: none;
}

#bubble2 li a img.large {
    display: none;
}

#bubble2 li a:hover img.small {
    display: none;
    z-index: 0;
}

#bubble2 li a:hover img.large {
    display: block;
    margin-top: -8px;
    margin-left: -8px;
    z-index: 1000;
}