Question

This is the code that I am using to increase the size of my image on rollover but it resizes from the top left as opposed to the center of the image. How do I resize from the center of the image?

    <script>
        $('img').hover(function() {//Hovering
          $(this).animate({
              width: '50%',
              height: '50%',
          }, 400);//Speed of animation in ms
      }, function() { //Not hovering
          $(this).animate({
              width: '25%',
              height: '25%',
          }, 400);
      });
    </script>

Answer 1

As far as I know, there’s no jQuery functionality to do that, but you could do it manually by adjusting the top and left position as you resize the image to give the effect of it resizing from the center.

To do that you probably need to position absolutely so the left and top take effect like this fiddle