...
Updated: 31/01/2019 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/148
| Table of Contents |
|---|
...
Introduction
Magento 2 Change Product Image On Hover allows customers to view another image or video of your product just by hovering over a product from the Catalog Pages.
Highlight Features
- Apply hovering for product images on Home Page and Category page.
- Display other another image without navigating to the product detail page
- Set hover image in two ways: automatic and manual.
- 6 hover animations and 5 easing functions
- Zoom in/out on product image hovering
- Display video on hover
System Requirements
Your store should be running on Magento 2 version 2.1.x.; 2.2.x; 2.3.x
...
Enable Module: Choose Yes to enable Catalog Image Hovering
Default hovered Image:
Yes: The first image in the product’s gallery, except from product’s image, will be set as the hovered image.
No: Choose No to set the hover image manually.
Enable zoom effects on product page
Store admins can decide how product image can be zoomed in/out with 5 special effects:
- Basic zoom
- Tint zoom
- Lens zoom
- Mousewheel zoom
- Inner zoom
...
Animation: 6 types of hover animation
No animation
Fade into
Transition Left To Right
Transition Right To Left
Transition Bottom To Top
Transition Top To Bottom
...
Duration: the length of time that an animation takes to complete one cycle.
Easing: animation’s performance speed
Ease In: slow start and fast end
Ease Out: fast start and slow end
Ease In Out: slow start, fast middle, and slow end
Ease: like Ease In Out but its start slightly faster than end
Linear: no easing
Animation The animation starts when hovering over
Product Image: show another image when hovering the product image
Product Wrapper: setting hovered image to shows up when mouse is moved to the product container
...
Set up product video hovering
Assign hovered role for videos.
...
Our extension provides you with options to replay video after it ends or to continue playing on the next hover action.
Set the hovered image manually
...