Vue zoom on hover is a responsive image with a zoomed-in image on hover. vue.js component displays an image the width of the original element and on hover, it shows the full image or the resized image in the image area.

Features

• Enable/disable the feature
• Custom scale for enlarged image
• Optionally a separate zoom image
• Happened when all photos were uploaded
• Event when resizing images (css response, etc)
• Basic touch support with zoom in/out on tap

How to Create a 360 Product View Using JavaScript | JS Cloudimage

How to make use of it:

Simple example (with example div as the main container).

<div style="width:400px">
  <zoom-on-hover img-normal="image.jpg"></zoom-on-hover>
</div>

<zoom-on-hover img-normal="image.jpg" img-zoom="bigger-image.jpg" :scale="1.5" :disabled="true"
  @loaded="onload" @resized="onresize"></zoom-on-hover>

Register the component in your Vue application or component.

new Vue({
  el: "#app",
  components: {
    zoomOnHover: zoomOnHover
  }
})

See Demo And Download

Official Website(Intera): Click Here

This superior jQuery/javascript plugin is developed by Intera. For extra Advanced Usage, please go to the official website.