On hover add class to show a div

[squizeers]

I am trying to solve an issue where the image size is increased on hover and at the same time, a div which is originally hidden needs to be shown on top of the image.

So far the image enlargement on hover works.

here is my php file

        <ul class="products-grid">
      
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                
                <img id="<?php echo $_product->getId();?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(200, 268)->keepFrame(FALSE); ?>" width="150" height="201" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" 
                 /> 
                 </a>
                 
                  <div class="productdetailoverlay">
                <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                <?php echo Mage::helper('colorselectorplus')->getListSwatchHtml($_product); ?>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <div class="actions">
                    <?php if($_product->isSaleable()): ?>
                        <button type="button" title="<?php echo $this->__('Add to Bag') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Bag') ?></span></span></button>
                    <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                    <ul class="add-to-links">
                      <?php /*?>  <?php if ($this->helper('wishlist')->isAllow()) : ?>
                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                        <?php endif; ?><?php */?>
                     <?php /*?>   <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                        <?php endif; ?><?php */?>
                    </ul>
                    </div>
                    </div>
                
            </li>
        <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
        </ul>

Here is the css:

.products-grid li.item {float:left; width:150px; height:201px; position:relative;}

.products-grid li.item .product-image{width: 150px; height: 201px;position:absolute; z-index:1;-ms-interpolation-mode: bicubic; }

.products-grid .productdetailoverlay {float:left; background:#000;position:absolute;bottom:0px; left:0px; width:100%; z-index:-1;}

and the javascript:

var j = jQuery.noConflict();

j(document).ready(function(){

//Larger thumbnail preview 

j("ul.products-grid li a.product-image").hover(function() {
	
	j(this).css({'z-index' : '5'});
	
	j(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-33px', 
			marginLeft: '-29px',
			top: '50%', 
			left: '50%', 
			width: '200px', 
			height: '268px',
		}, 200);
		
		
	j(this).addClass("productdetailoverlay")
			.animate({
			zIndex: '6'		
		});	
	} , 
	
	function() {
	j(this).css({'z-index' : '0'});
	
	j(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px',
			zIndex: '10',
			height: '201px', 
		}, 400);
		
		
		j(this).removeClass("productdetailoverlay").stop()
		.animate({
			zIndex: '0',
		}, 400);
});


//Swap Image on Click
	j("this").click(function() {		
		var mainImage = j(this).attr("href"); //Find Image Name
		j("ul.products-grid li a.product-image").attr({ src: mainImage });
		return false;		
	});
 
});

Any help will be much appreciated.

The url for the project: http://173.193.110.251/~shopcoog/ind...html?mode=grid