So I'm sure this thread is dead by now but thought I would leave an answer after experiencing a lot of pain searching for an answer. This is specific to the hyde template (Brine family) product page but explanation references op template link.
When you utilize inspect for the product and you drill down you'll find for each index item there are two images that the product item is pulling for the cover and subsequent hover photo.
To update the hover photo you would combine the CSS tags in the template as below:
.article-index-1 grid-item-image.grid-image-hover {
content: url ("url of the desired image here")
}
your tags will be different than the grid-item-image but reference the template in the original post to find location.