Create smoother mouseover effect on product images using jQuery in Magento UPDATE

Well at the insistence of you guys out there I thought I’d post my results for getting a nice smoother mouseover effect using jQuery.

You need to edit the list.phtml in the two places it is pumping out images for the List view & the Grid View.
Copy and past the following code completely over the <a> tag that covers the product image:


<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<img class="small_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217); ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<img class="thumbnail" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>

(Note: As before I am constraining my images to be 217px high for my theme)
This will basically put the thumbnail image directly below the small_image & when you add the following lines to your stylesheet they will be absolutley positioned on top of each other.


.product-image{position:relative}
.product-image img{position:absolute}
.product-image img.small_image{z-index:10}
.product-image img.thumbnail{z-index:1}


Then in the file:
\app\design\frontend\YOURTHEME\default\template\page\html\head.phtml add the following script:


<script type="text/javascript">

});
</script>


You can see the results here:
http://miminoor.kineticpulse.net/denim.html

With many thanks to this post for the quick inspiration:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/