Not all woocommerce templates put the product archive in ul/li tags. Removes these selectors to only use the classes.
Added a line of js that gets the current width of the primary image and assigns it to the width of the secondary image. This means that the hover image will be the same size as the primary regardless of whether the primary image has been resized by css itself (which most responsive themes will do).
The CSS animations seem to distort the image. I removed them and replaced with a simple opacity change with CSS transition.
ul/litags. Removes these selectors to only use the classes.