Press "Enter" to skip to content

Responsive Image With Zoomed Image On Hover For Vue.js

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *