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.
product image zoom on hover jquery, css image zoom on hover outside a div, vuetify image zoom, vue inner image zoom, vuetify zoom image on hover, vue image magnifier
Features
- Enable/disable 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 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 } })
Vue Image Zoom On Hover Component Plugin/Github, image zoom on hover npm
See Demo And Download
Official Website(Intera): Click Here
This superior jQuery/javascript plugin is developed by Intera. For extra Advanced Usages, please go to the official website.
Be First to Comment