How to display additional image on hover

[poltoo]

Hello, I am trying to display the first additional image once the product is hovered on the category view. I have got the CSS part done and everything is working fine, however...I am not being able to display the additional image.

I have two divs setup one as front image and the next one is set as back image so when hovered...the back image div would show...all I need to do is "echo" the additional image in this div. i tried putting

Code Select Expand

echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false);

but that gives me an error...

so I have it as

Code Select Expand

<div class="back-image">
  <a style="display:block; min-height: <?php echo VmConfig::get('img_height').'px';?>" title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>">
                  <?php include JPATH_THEMES.'/horme2/html/com_virtuemart/vt_badges.php'; // Product Badges ?>

   <?php
echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
?>
</a></div>
               
                <div class="front-image">
  <a style="display:block; min-height: <?php echo VmConfig::get('img_height').'px';?>" title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>">
                  <?php include JPATH_THEMES.'/horme2/html/com_virtuemart/vt_badges.php'; // Product Badges ?>

                                           
                                           <?php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
?>

</a></div>

which only shows the main image again on hover....

Please help....thanks in advance