Puede ser para texto o para imagen

HTML <div class="stable">
<div class="balloon ease-out"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/1a/30/42/561671.gif" alt="" width="125" height="149" /></div>
<div class="balloon ease-in-out"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/a5/51/39/833030.gif" alt="" width="125" height="149" /></div>
<div class="balloon cubic-bezier">Puede ser para texto o para imagen</div>
</div>
<div class="stable">
<div class="balloon default"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/37/bc/28/866985.gif" alt="" width="125" height="149" /></div>
<div class="balloon linear"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/a0/f6/5a/788695.gif" alt="" width="125" height="149" /></div>
<div class="balloon ease-in"><img style="border: 1px dotted #ccc; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1emx; -webkit-box-shadow: box-shadow: 3px 2px 6px #000000; ; -moz-box-shadow: box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http://file.mobilmusic.ru/70/0c/93/1280599.gif" alt="" width="125" height="149" /></div>
</div>

CSS<style type="text/css"><!--
.stable {
 position: relative;
 height: 320px;
 }
 .stable .balloon {
 position: absolute;
 bottom: 0;
 width: 100px;

 height: 163px;
 background: url(/images/balloon.png) no-repeat;
 }
 
 .stable .balloon.ease-in {
 left: 59px;
 transition-timing-function: ease-in;
 }
 .stable .balloon.ease-out {
 left: 169px;
 transition-timing-function: ease-out;
 }
 .stable .balloon.ease-in-out {
 left: 279px;
 transition-timing-function: ease-in-out;
 }
 .stable .balloon.cubic-bezier {
 left: 389px;
 transition-timing-function: cubic-bezier(0,1,1,0);
 }
--></style>
<style type="text/css"><!--
 .stable {
 position: relative;
 height: 320px;
 }
 .stable .balloon {
 position: absolute;
 bottom: 0;
 width: 100px;
 height: 163px;
 background: url(/images/balloon.png) no-repeat;
 }
 .stable:hover .balloon {
 bottom: 157px;
 transition-duration: 3s;
 } 

 .stable .balloon.default {
 left: 39px;
 background-image: url(/images/balloon-blue.png);
 }
 .stable .balloon.linear {
 left: 149px;
 transition-timing-function: linear;
 } 
 .stable .balloon.ease-in {
 left: 259px;
 transition-timing-function: ease-in;
 }
--></style>