Magento – Adding Image Rollerover Effects to Product Lists

What I’m trying to accomlish is adding a roller over effect to the images.  I want the image to pop up in another layer on rollover.

As always, with any editing of any files that currently already work, make a BACKUP!

I like to copy and paste the file, then rename it .backup

First I add the code to the css file:

Then I want to edit my template file:

Find the line (about line 100-105) that contains:

add the php signs around that and comment it out, then add my following lines:

The image resize function all depends on how you have manento setup and the cache, but this should work.  Feel free leave comments on how this works.

4 thoughts on “Magento – Adding Image Rollerover Effects to Product Lists”

  1. On Mac this creates a problem for the image to view correctly. You see the hidden image. The code i took this from used used a span for the product-image class, where as how it’s setup in magento it’s a paragraph for the product-image class. So i had to add this to the css style sheet:


    Add that to the css to correct mac problems by displaying the hidden rollover image.

  2. After trying many methods to no avail, I found a great solution for getting this rollover effect. I read this today on another forum ( http://www.magentocommerce.com/boards/viewthread/6402/P0 ).
    It’s very simple, and it works beautifully!!!

    The following is found in templates/catalog/product/view/media.phtml …

    Replace this section:


    <a href="#" onclick="popWin('getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;">
    <img src="helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="htmlEscape($_image->getLabel()) ?>" title="htmlEscape($_image->getLabel()) ?>"/>

    With this section:


    <a href="helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="getName();?>" onmouseover="$('image').src = this.href; return false;">

    <img src="helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="htmlEscape($_image->getLabel()) ?>" title="htmlEscape($_image->getLabel()) ?>"/>

Leave a Reply