To swap an image when a user hovers over it, the most common and effective method is to place two images in the same container – making the “rollover” image transparent by default. When the user hovers over the container, the “rollover” image becomes opaque.
Tag: change image on hover
Add image change on product list page
In PLP, image changes when we hover it.