Change images on hover in product list page

Question

I need to add the image change on hover functionality into the product list page in Magento 2.

When user is in product list page, when he/she hovers mouse over the displayed product, it should show change of image/another image on mouse click and revert back to originally displayed image when user moves mouse pointer away. I added changed image as a custom product attribute as follows.

I added a custom product attribute which has the Media Image in Catalog Input Type for Store Owner option. Then I gave attribute code as hover_image. I Set Add to Column Options and Use in Filter Options to "No".

Then I added my new attribute into attribute set -> default. Moved my attribute into images group. Then I can upload image from backend ( Products->Catalog ) and choose image role as hover_image.

How can I check if certain product has image for hover_image and if that product has one, How can I add the hover effect on product list page?

I tried looping through products in list.phtml but I failed. can anyone just give me a hand? even a pointer to right direction would be helpful. Also it's okay even if you know a way for using direct usage of object manager.

Answer 1

In list.phtml use $productImageHover = $block->getImage($_product, 'hover_image');, to get the hover image and add a class for hidden, and on .product-item:hover display the image, also the image width and height should be the same as the main image for the listing category_page_grid/category_page_list depending on your situation, don't forget to hide the "non-hover" image on hover