Hello,
this is the smooth font resize for css class “.bump” effect.
Just put class=”bump” on the items you want and use the following javascript somewhere on your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | window.addEvent('domready',function() { //scaling values var scale_px=6; var scale_em=0.3; var bumps=$$('.bump'); bumps.each(function(bump, i){ var init_size=bump.getStyle('font-size'); var units=init_size.match(/em/)!=null ? 'em' : init_size.match(/px/)!=null ? 'px' : false; if(units===false) return false; var size_up=(init_size.toFloat()+(units=='em' ? scale_em : scale_px))+units; var fx=new Fx.Morph(bump, {duration:90, wait:false, transition:Fx.Transitions.Back.easeOut}); bump.addEvent("mouseenter", function(event) { fx.start({ 'font-size':size_up }); }); bump.addEvent("mouseleave", function(event) { fx.start({ 'font-size':init_size }); }); }); }); |
Note: In order for this to work on IE7 you need to have some font-size defined in your css for every “.bump” on your page. Otherwise font-size will return “100%”, and it get’s impossible to know how to resize – i’ve tried it – damn IE :/
You can check it working here, on the links under “We Provide:”.
Tanks :)

![[del.icio.us]](http://techtrouts.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://techtrouts.com/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://techtrouts.com/wp-content/plugins/bookmarkify/facebook.png)
![[Twitter]](http://techtrouts.com/wp-content/plugins/bookmarkify/twitter.png)