How to create a Bubble effect with CSS

Demo

• 
• 
• 
•        

Here is the CSS code:

<style type="text/css">      div#content{
          margin:20px;
          text-align:center;
     }

     #bubble {
          list-style: none;
  margin: 20px 0px 0px;
padding: 0px;
     }
     #bubble li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
     }
     #bubble li a img {
position: relative;
border: none;
     }
     #bubble li a img.large {
display: none;
     }
     #bubble li a:hover img.small {
display: none;
z-index: 0;
     }
     #bubble li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
     }
</style>

Here is the HTML code:

<div id="content">

<ul id="bubble"> 

     <li> 
          <a href="http://twitter.com/anklet1989" title="Follow me on Twitter"><img class="small" src="images/twitter.png" alt="Follow me on Twitter" /><img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" /> 
          </a> 
     </li>
     <li> 
          <a href="http://facebook.com/duylamng" title="I'm on Facebook"><img class="small" src="images/facebook.png" alt="I'm on Facebook" /><img class="large" src="images/facebook_large.png" alt="I'm on Facebook" /> 
          </a> 
     </li> 
     <li> 
          <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://aext.net&amp;title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me"><img class="small" src="images/delicious.png" alt="Save me" /><img class="large" src="images/delicious_large.png" alt="Save me" /> 
          </a> 
     </li> 
     <li>
          <a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Fave me on Technorati"><img class="small" src="images/technorati.png" alt="Fave me on Technorati" /><img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" /></a>
     </li> 
</ul>
</div>