Add Hover image in a Product to display on listing page Magento 2

1) Add “Hover” attribute

Go to Stores > Attributes > Products and click on “Add New Attribute”

Create the attribute “Hover” and Select “Media Image” in the “Catalog Input

Type for Store Owner” dropdown and Save it.

2) Now go to Attribute Set.

Stores > Attributes > Attribute Set

Add “hover” attribute to “Images” Group like the below screenshot.

3) Now go to product and upload an image and select Hover like below screenshot.

4) Now we have to use this attribute in the listing page. So we have to make ‘used_in_product_listing’ to 1.

We can do that by using MySQL.
You need to take “hover” Attribute_ID from admin.
You can go to your “hover” attribute page in admin and get its ID from URL.
Suppose that Attribute_ID is 99 in our case.
Now, go to the database and select the “catalog_eav_attribute” table.
Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.
Use below MySQL query :

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

5) Declare Hover attribute in view.xml
view.xml should be in app/design/frontend/MyThemeVendor/MyTheme/etc/view.xml

add below code

<?xml version="1.0"?>
 <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/view.xsd">
 <media>
  <images module="Magento_Catalog">
   <image id="hover_product_list" type="hover">
    <width>240</width>
    <height>300</height>
   </image>
  </images>
 </media>
</view>

<?xml version="1.0"?>

<media>

</image>

</images>

</media>

</view>

6) Get “Hover” attribute in listing template

Listing template is in app/design/frontend/MyThemeVendor/MyTheme/Magento_Catalog/templates/product/list.phtml

User below helper to initialize hover image.

<?php 
$_imageHelper = $this->helper('Magento\Catalog\Helper\Image');
$_imageHover = 'hover_product_list';
?>

<?php

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image');

$_imageHover = 'hover_product_list';

Search “product-image” class and use the below code and CSS to get a hover image.

<div class="product-image">
    <div class="product-label">
        <?php 
            $newFromDate = $_product->getNewsFromDate();
            $newToDate = $_product->getNewsToDate(); 
            $now = date("Y-m-d H:m:s");
            // Get the Special Price
            $specialprice = $_product->getSpecialPrice(); 
            // Get the Special Price FROM date
            $specialPriceFromDate = $_product->getSpecialFromDate();
            // Get the Special Price TO date
            $specialPriceToDate = $_product->getSpecialToDate();
        ?>
        <?php if($specialprice && (($specialPriceFromDate <= $now && $specialPriceToDate >= $now) || (($specialPriceFromDate <= $now && $specialPriceFromDate != NULL) && $specialPriceToDate  == ''))): ?>
            <span class="sale"><?php echo __('Wras'); ?></span>
        <?php endif; ?>                        
        <?php if((($newFromDate <= $now && $newToDate >= $now) || (($newFromDate <= $now && $newFromDate != NULL) && $newToDate == NULL))): ?>
            <span class="new"><?php echo __('New'); ?></span>
        <?php endif; ?>
    </div>
    <div class="product-item-image" data-container="product-grid">
        <?php
            $productImage = $block->getImage($_product, $imageDisplayArea);
            if ($pos != null) {
                $position = ' style="left:' . $productImage->getWidth() . 'px;'
                    . 'top:' . $productImage->getHeight() . 'px;"';
            }
        ?>
        <?php // Product Image ?>
        <a class="product-item-photo-focus" href="<?= $block->escapeUrl($_product->getProductUrl()) ?>">
            <?= $productImage->toHtml() ?>
        </a>
        <?php //Product Image Hovered ?>
        <?php
        $productImageHover = $_imageHelper->init($_product, $_imageHover);
        if ($pos != null) {
            $position = ' style="left:' . $productImage->getWidth() . 'px;'
        . 'top:' . $productImage->getHeight() . 'px;"';
        }
        ?>
        <?php if (strpos($productImageHover->getUrl(), 'Magento_Catalog/images/product/placeholder/hover.jpg') == false) { ?>
            <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product-item-photo-hovered" tabindex="-1">
                <img src="<?php echo $productImageHover->getUrl(); ?>" class="photo-image-hover" width="<?php echo $productImage->getWidth(); ?>" height="<?php echo $productImage->getWidth() ?>" alt="<?php echo $productImageHover->getLabel() ?>"/>
            </a>
        <?php } ?>
    </div>
</div>

<?php

$newFromDate = $_product->getNewsFromDate();

$newToDate = $_product->getNewsToDate();

$now = date("Y-m-d H:m:s");

// Get the Special Price

$specialprice = $_product->getSpecialPrice();

// Get the Special Price FROM date

$specialPriceFromDate = $_product->getSpecialFromDate();

// Get the Special Price TO date

$specialPriceToDate = $_product->getSpecialToDate();

<?php if($specialprice && (($specialPriceFromDate <= $now && $specialPriceToDate >= $now) || (($specialPriceFromDate <= $now && $specialPriceFromDate != NULL) && $specialPriceToDate == ''))): ?>

<?php endif; ?>

<?php if((($newFromDate <= $now && $newToDate >= $now) || (($newFromDate <= $now && $newFromDate != NULL) && $newToDate == NULL))): ?>

<?php endif; ?>

</div>

<?php

$productImage = $block->getImage($_product, $imageDisplayArea);

if ($pos != null) {

$position = ' style="left:' . $productImage->getWidth() . 'px;'

. 'top:' . $productImage->getHeight() . 'px;"';

}

<?php // Product Image ?>

<a class="product-item-photo-focus" href="<?= $block->escapeUrl($_product->getProductUrl()) ?>">

<?= $productImage->toHtml() ?>

</a>

<?php //Product Image Hovered ?>

<?php

$productImageHover = $_imageHelper->init($_product, $_imageHover);

if ($pos != null) {

$position = ' style="left:' . $productImage->getWidth() . 'px;'

. 'top:' . $productImage->getHeight() . 'px;"';

}

<?php if (strpos($productImageHover->getUrl(), 'Magento_Catalog/images/product/placeholder/hover.jpg') == false) { ?>

<a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product-item-photo-hovered" tabindex="-1">

<img src="<?php echo $productImageHover->getUrl(); ?>" class="photo-image-hover" width="<?php echo $productImage->getWidth(); ?>" height="<?php echo $productImage->getWidth() ?>" alt="<?php echo $productImageHover->getLabel() ?>"/>

</a>

<?php } ?>

</div>

CSS:

.product-item-image {position: relative;}
.product-item-image:hover .product-item-photo-hovered {opacity:1;z-index: 1;visibility: visible;}
.product-item-photo-hovered {position: absolute;top: 0;left: 0;visibility: hidden;opacity: 0;transition: 0.6s;}

.product-item-image {position: relative;}

.product-item-image:hover .product-item-photo-hovered {opacity:1;z-index: 1;visibility: visible;}

.product-item-photo-hovered {position: absolute;top: 0;left: 0;visibility: hidden;opacity: 0;transition: 0.6s;}

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-641f0fb821543910655804/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento Certified Developer

Hire V. Brahmbhatt

Let’s have a call

Fill the form & Get Installation Support