vue-zoom-on-hover

Vue.js component that shows the full image or a scaled image in the image area on hover. Forked from here

Demo

Live demo

Usage

Install package:

npm i vue-zoom-on-hover

Register the component:

import ZoomOnHover from "vue-zoom-on-hover";
Vue.use(ZoomOnHover);

With cdn:

<script type="module">
  import ZoomOnHover from "https://unpkg.com/vue-zoom-on-hover@latest/dist/index.esm.min.js";
  Vue.use(ZoomOnHover);
  new Vue({
    el: "#app"
  })
</script>

Use it like this:

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

All options:

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

Features

• enabled/disabled property
• custom scale for zoomed image
• optionally a separate zoom image
• event when all images loaded
• event when images resized (responsive css, etc)

Caveats

if the parent container is bigger than the source image, the normal image stretches to the size of the parent container but the zoom image will have the original width (will be smaller for example)

Possible enhancements

• support for touch devices