How to make thumbs 70% bigger on hover with jQuery

I want jQuery colorbox to open the picture on mouse hover开发者_开发百科 and close on mouseout. Can you advice how I can do it?

This could get you started...

HTML

<img src="a.jpg" alt="b" />

jQuery

$('img').hover(function() {
    $(this).stop().animate({ width: '170%' }, 500);
}, function() {
    $(this).stop().animate({ width: '100%' }, 500);
});

i would do something like this:

 $(function(){
  function fatOnHover($elements, zoomSize, animationSpeed){
  $elements.each(function(i){
     var $wrap, height, width, bigWidth, bigHeight, $that = $(this);
     height = $that.height();
     width = $that.width();
     bigWidth = (width / 100) * zoomSize;
     bigHeight = (height / 100) * zoomSize;
      $wrap = "<div style='z-index: " + (10000-i) +";width: " + width + "px; height: " + height + "px; position: relative; float: left'></div>",
      $that.data({"width": width, "height": height, "bigWidth": bigWidth, "bigHeight": bigHeight})
          .wrap($wrap)
   }).hover(
     function(){
        var $that = $(this);
        $that.stop().animate({"width": $that.data("bigWidth"), "height": $that.data("bigHeight")}, animationSpeed)
     },
     function(){
        var $that = $(this);
        $that.stop().animate({"width": $that.data("width"), "height": $that.data("height")}, animationSpeed)
     }
  ).css("position", "absolute")
   }


fatOnHover($('img'), 120, 300)
})

you can test it here: http://jsfiddle.net/GHuNF/1/