Of course, as with anything dependant on hover, only desktop users will get the benefit of the hover effect. On smaller screens, we just need to ensure the buttons are visible and in their usual positions.
To create this effect, we'll use Oxygen's Woocommerce Integration, using the 'Product List' element for the archive pages and 'Related Posts' & 'Upsell Posts' components on the single product pages.
The image that appears when the user hovers is the first image from the product gallery. To change this image, we can reorder the gallery from the product edit screen to make the correct image appear first.