CSS Codes
CSS Layouts

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link href="imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Must be wider than contained images (before bubbling) itself*/
height:50px; /*height of image container. Must be taller than contained images (before bubbling) itself*/
}

#orbs li img{
width: 55px; /*width of each image before bubbling. Height scales automatically*/
}

#squares li{
width: 50px; /*width of image container. Must be wider than contained images (before bubbling) itself*/
height:40px; /*height of image container. Must be taller than contained images (before bubbling) itself*/
}

#squares li img{
width: 31px; /*width of each image before bubbling. Height scales automatically*/
}

</style>

<script type="text/javascript" src="imgbubbles.js">

/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})

</script>
</head>

<body>

<h4>1.75x magnification</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="orbs/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/rss.png" alt="Add RSS Feed" /></a></li>
</ul>

<br />
<h4>2.5x magnification</h4>
<ul id="squares" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="squares/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/delicious.png" alt="Add to Delicious" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/rss.png" alt="Add RSS Feed" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/twitter.png" alt="Add to Twitter" /></a></li>
</ul>

</body>
</html>