Hover Image
The Hover Image component is built with a primary image and an alternate image. The component displays the primary image by default and instantly swaps to the alternate image when a user hovers over it with a mouse or taps a toggle button on mobile. This can be used for showing alternate product angles, revealing interactive details, or adding engaging visuals to our teasers, carousels, and standard page layouts.
This component can be used with the following Smart Crops and can be fit to your desired width on the page:
No Crop
21:9
16:9
1:1
2:3 (with icon 'toggle' white or black on desktop)
2:3 (with icon 'swap' white or black on desktop)
472x550 (3-up style)