Add Hover image in a Product list page in Magento 2

By vijayrami

Sunday, October 18, 2020

Share :

Tweet

Magento2,

 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 273 in our case.

Now, go to the database and select the "catalog_eav_attribute" table.

Select the attribute with id 273 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 = 273;

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" encoding="UTF-8"?>
<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>

6) Get "Hover" attribute in listing template

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

Find your product image code which is wrapped with a href tag.

Just below it add this code:

<?php //Product Image Hovered ?>
<?php
$_imageHelper = $this->helper('Magento\Catalog\Helper\Image');
$_imageHover = 'hover_product_list';
$productImageHover = $_imageHelper->init($_product, $_imageHover);
$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 } ?>

Add below css to add proper effect:

.product-item-photo {position: relative;}
.product-item-photo: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;}

Tag : Magento2