Open Source
min read
November 8, 2019
November 4, 2016

Polymer Element for zooming image on mouseover - <polymer-zoomove>

Polymer Element for zooming image on mouseover - <polymer-zoomove>
Table of contents

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. 

Demo -

Github project -- 

Using zoomove-polymer Element in your Project

Install this element using bower in your project 

$ bower install zoomove-polymer --save-dev

or you can grab the element  from the github from here -  and place it in the components for referencing.

Now you can add the element in your html page using html imports

<link rel="import" href="../polymer-zoomove.html">

And in your HTML you can now use the tag as follows,



Available attributes for this elements are:

  1. image-path - The url of the photo to be displayed.
  2. image-scale - Sets the zoom size that should be applied to the image.
  3. image-move - Choose whether the image should move with the mouse move
  4. image-over - With 'over' it is possible to define whether the image may be above
  5. image-cursor - Define the cursor pointer or default
Written by
No art workers.
We'd love to talk about your business objectives