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.