Zooming-in on images with mouse hover is a common feature used on E-commerce websites to let buyers see details of the products. We had a similar requirement on a polymer project for which we integrated the Zoomove jQuery plugin into polymer to use it as reusable component and now open sourcing it.
Github project -- https://github.com/qed42/polymer-zoomove
Using zoomove-polymer Element in your Project
Install this element using bower in your project
or you can grab the element from the github from here - https://github.com/qed42/polymer-zoomove and place it in the components for referencing.
Now you can add the element in your html page using html imports
And in your HTML you can now use the tag as follows,
Available attributes for this elements are:
- image-path - The url of the photo to be displayed.
- image-scale - Sets the zoom size that should be applied to the image.
- image-move - Choose whether the image should move with the mouse move
- image-over - With 'over' it is possible to define whether the image may be above
- image-cursor - Define the cursor pointer or default