174n / vue-zoom-on-hover

Vue.js component that shows the full image or a scaled image in the image area on hover. Demo:

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

vue-zoom-on-hover's Issues

Is this still working?

Thank you! ❤️

I just wanted to say thank you! I was looking for such library for a long time. Installation process was very straightforward. I added it to on of projects and it's just working!

Postion style not changing on hover

As descriptive as the title, when hovering it just changing the image, but top left style doesnt change, im using with nuxt

SSR

Any tips on how to use it with Nuxt?

disable touch support

Hi.. is there an easy way to disable touch support? Trying to mess with the src code but I don't want to break things.. Great library though!

IE 11 support

Hey guys

We love your library, but we have a responsibility to maintain Ie11.

There is an arrow function in one of the places in your code.
Please rewrite this function so that Ie11 does not break

thank

No longer working in Safari?

Hi guys!

Great work here, it's been a very solid component!

It seems that it stopped working on destktop Safari? Tested on a couple different Macbooks.
The images appear, but no zoom on hover