I am creating a grid of thumbnails. When a user hovers over a thumbnail, the image enlarges. The *trick* is, I want the "active area" to only be the size of the thumbnail. That is, the thumbnails are 180x120, and when the mouse leaves that area, I want the large image to shrink back to normal size. I have a working demo here:  http://www.norabrowndesign.com/testLayouts/expanding-photos-li.html

The way I accomplished this feels hacky though, and I's like to know if there's a simpler/more elegant way to accomplish it. The thumbs are an unordered list of images. Here is my javascript:

2. $(document).ready(function(){
3.     $('li').append('<div class="test"></div>').mouseenter(function(){
4.         $(this).css('z-index',1000);
5.         $this_img = $(this).find('img');
6.         photo_pos= $this_img.position();
7.          $this_img.css({
8.             'position': 'absolute',
9.             'top': photo_pos.top,
10.              'left': photo_pos.left,
11.             'z-index': 1001
12.         }).stop().animate({
13.             width:600,
14.             height:400,
15.             marginLeft:-20,
16.             marginTop:-10,
17.             padding:10
18.         });
20.         $('.test',this).css({
21.             'top': photo_pos.top,
22.             'left': photo_pos.left
23.         }).mouseleave(function(){
24.             $(this).prev().stop().animate({
25.                 width:180,
26.                 height:120,
27.                 marginLeft:0,
28.                 marginTop:0,
29.                 padding:0
30.             },function(){
31.                     $(this).css('z-index','auto').parent().css('z-index','auto');
32.             });
33.         });
34.     });
35. }); 

In essence, I add an overlay div over each thumbnail which acts as the trigger to shrink the enlarged image. I thought I could use the parent <li>, as it doesn't appear to expand with the image (since I've set its size in my CSS) but that didn't work. 

Any feedback is much appreciated!