How to change product image on hover?

Question

I am trying to change Image on Hover in all product. Any help regarding this.It's not about product placeholder. Problem is that I am not able to get another type of image. product_page_large_image and product_base_image is same output but when I am trying with product_small_image, it's not working.

All thing oK, I have to get another image from the backend. For example, product Have two Image one is default show and one is showing after hover.

<?php foreach ($_productCollection as $_product): ?>
<?php echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
<div class="product-item-info" data-container="product-grid"  >
    <?php // Product Image    ?>
    <a href="<?php echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
                        <span style="width:270px;" class="product-image-container">
                            <span style="padding-bottom: 137%;" class="product-image-wrapper" >
                                <?php
                                $imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                                    ->init($_product, 'product_page_image_large')
                                    ->keepAspectRatio(TRUE)
                                    ->keepFrame(FALSE)
                                    ->resize(270, 404)
                                    ->getUrl();

                                $imageUr2 = $this->helper('Magento\Catalog\Helper\Image')
                                    ->init($_product, 'product_base_image')
                                    ->keepAspectRatio(TRUE)
                                    ->keepFrame(FALSE)
                                    ->resize(270, 404)
                                    ->getUrl();
                                ?>
                                <img src="<?php echo $imageUrl; ?>" onmouseover="this.src='<?php echo $imageUr2; ?>';" onmouseout="this.src='<?php echo $imageUrl; ?>';"/>
                                <!-- <img class="product-image-photo" src="<?php //echo $imageUrl; ?>" onmouseover="alert('And yet another one!')" />
                                <!--<div class="bl_black"></div><!-->
                           </span>
                        </span>
    </a>
    <?php endforeach; ?>

Answer 1

Please check with below code.

<?php foreach ($_productCollection as $_product): ?>
<?php echo ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
<div class="product-item-info" data-container="product-grid">
    <a href="<?php echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
        <span style="width:270px;" class="product-image-container">
            <span style="padding-bottom: 137%;" class="product-image-wrapper">
            <?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                $product = $objectManager->create('Magento\Catalog\Model\Product')->load($_product->getId());
                $images = $product->getMediaGalleryImages();
                $imgCNT = 1;
                foreach ($images as $child) {
                    if ($imgCNT == 1) {
                        $imgurl1 = $child->getUrl();
                    } elseif ($imgCNT == 2) {
                        $imgurl2 = $child->getUrl();
                    } else {
                        break;
                    }
                    $imgCNT++;
                }
                $imageUrl = $this->helper('Magento\Catalog\Helper\Image')->init($_product, 'product_page_image_large')->keepAspectRatio(true)->keepFrame(false)->resize(270, 404)->getUrl(); ?>
                <img class="product-image-photo" src="<?php echo $imageUrl; ?>"
                     onmouseover="this.src='<?php echo ($imgurl2) ? $imgurl2 : $imageUrl ?>';"
                     onmouseout="this.src='<?php echo $imageUrl; ?>';"/>
                <div class="bl_black"></div>
            </span>
        </span>
    </a>
</div>
<?php endforeach;?>

Answer 2

I made this to work in my site https:/www.gamesunited.com.kw

1. First I added Attribute 'hover_image' with Catalog Input Type for Store Owner as Media Image

2. Then in the attribute setting StoreFront properties "Used in Product Listing" is set as 'Yes'

There is bug and this option does not show in admin attribute setting page. Refer the image to show that.

3. In my custom theme etc/view.xml I added

4. In my custom theme Magento_Catalog/templates/product/list.phtml I added following

$_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
$hoverimg = 'category_page_grid_hover';
$hoverimg = 'category_page_list_hover';

and then

<a href="<?php echo $_product->getProductUrl() ?>" tabindex="-1">
  <?php $productImage = $_imagehelper->init($_product, $image);
        $productImageUrl = $productImage->getUrl(); ?>
<img class="product-image-photo default_image" src="<?php echo $productImageUrl; ?>" alt="<?php echo $productImage->getLabel(); ?>"/>

 <?php $productHoverImage = $_imagehelper->init($_product, $hoverimg);
      $productHoverImageUrl = $productHoverImage->getUrl(); ?>
<?php if($productImageUrl != str_replace("/thumbnail/","/small_image/",$productHoverImageUrl)): ?>
<img class="product-image-photo hover_image" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>"/>
<?php endif; ?>                        
</a>

5. and then CSS Styling

.products-grid .item .item-inner .box-image:hover .hover_image,
.products-list .item .item-inner .box-image-list:hover .hover_image
{
   opacity: 1;
    overflow: hidden;
    transform: scale(1);
    transition: all 0.3s ease 0s;
    visibility: visible;
}

.hover_image
{
 left: 0;
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 0;
    transform: scale(0);
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 100%;
}

Answer 3

You have to add code to product listing file on [YourTheme]=>[Magento_Catalog]=>[templates]=>[product]=>[list.phtml]

Get another image of product using the code below:

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product')->load($_product->getId());        
$images = $product->getMediaGalleryImages();
$imgCNT = 1;
foreach($images as $child){
if($imgCNT==1)
{$imgurl1=$child->getUrl();}
elseif($imgCNT==2)
{$imgurl2=$child->getUrl(); }
else
{break;}
$imgCNT++;
}

and add that both image url on product image like below added image

<img src="<?php echo $imgurl1; ?>" onmouseover="this.src='<?php echo $imgurl2; ?>';" onmouseout="this.src='<?php echo $imgurl1; ?>';"/>

Hope this will be helpful.