View Full Version : On hover add class to show a div

07-03-2011, 11:29 PM
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) ?>"

<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 */?>

<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>

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();


//Larger thumbnail preview

j("ul.products-grid li a.product-image").hover(function() {

j(this).css({'z-index' : '5'});

marginTop: '-33px',
marginLeft: '-29px',
top: '50%',
left: '50%',
width: '200px',
height: '268px',
}, 200);

zIndex: '6'
} ,

function() {
j(this).css({'z-index' : '0'});

marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '150px',
zIndex: '10',
height: '201px',
}, 400);

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: