title: Use mootools Fx to zoom background-size
body: <p>I'm trying to use mooTools Fx to zoom the background image of a div. I followed <a href="http://davidwalsh.name/css-transforms" rel="nofollow">david welshs article</a> To make custom transformations. My mooTools/js skills are just quite basic, so</p>
  
  <p>Also I am wondering if there is a possibility to incorporate to use a sine transitions for example (though it doesn't look like).</p>
  
  <p>Here's what I tried: <a href="http://jsfiddle.net/q2GQ7/" rel="nofollow">http://jsfiddle.net/q2GQ7/</a> </p>
  
  <p>Javascript:</p>
  
  <pre><code>$$('#program a').each(function(item, index){
      item.store('BackgroundZoomer', new Fx({ duration: 250}));
  });
  $$('#program a').each(function(item, index){
      item.retrieve('BackgroundZoomer').set = function(value) {
      var style = 200+value + "px " +200+value + "px";
      this.setStyle('background-size', style);
      };
  });
  $$('#program a').each(function(item, index){
      addEvents({
        'mouseenter': function(){   
              item.retrieve('BackgroundZoomer').start(0, 200); },
          'mouseleave': function(){
              item.retrieve('BackgroundZoomer').cancel();}
      });
  });
  </code></pre>