Here is my example: http://jsfiddle.net/lcssanches/qtaUA/\[code\]$(" .inner_left, .inner_right ").hover(function() { $(this).css("z-index", "99999"); $(this).stop(true,false).animate({ width: "240px",height: "180px" }, 250); $(this).css("background-color", "#D0D0D0"); },function() { $(this).css("z-index", ""); $(this).stop(true,false).animate({ width: "125px",height: "130px" }, 250); $(this).css("background-color", "#ffffff");});\[/code\]I have 3 divs, like a column with 3 rows.When hover in the first div, it grows from top-to-bottom and right-to-leftWhen hover in the third div, it grows from bottom-to-top and right-to-leftThe problem is the div that is in the second line.It need to grow part to top, and part to bottom. But fixed in the center.Now, in the example it only grow from top to bottom.I already try to put "top: -25px" int the jQuery animate, but it go to the top of wrapper.ThanksSorry if I choose wrong words to explain.