JavaScript Open Source・1 min read・Last update on November 8, 2019

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

 

 

 

 ![Polymer Element for zooming image on mouseover - <polymer-zoomove>](/sites/default/files/remediation-media/64e5ddecd8b51449bff05add_blog-featured-image.webp) 

 



 

   Table of contents  - [Using zoomove-polymer Element in your Project](#using-zoomove-polymer-element-in-your-project)
- [Available attributes for this elements are:](#available-attributes-for-this-elements-are)
 
  

 

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 - <https://qed42.github.io/polymer-zoomove/>

Github project -- <https://github.com/qed42/polymer-zoomove>

### 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 - <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

 ```

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

```

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

 ```

<polymer-zoomove
    image-path="http://lorempixel.com/600/600/animals/"
    image-cover="false"%>
</polymer-zoomove>
 
<polymer-zoomove
    image-path="http://lorempixel.com/600/600/animals/"
    image-scale="5">
</polymer-zoomove>
 
<polymer-zoomove
    image-path="http://lorempixel.com/600/600/animals/"
    image-cover="true">
</polymer-zoomove>


```

  ![polymer-zoomove](/sites/default/files/c3-body-media/a5d464be87d96390b6af2104.gif) ### 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

Saket Kumar

Frontend Head

 

 

 

 

 

 

 ## We'd love to talk about your business objectives

 [ Contact Us  ](/contact)