InnerMagnifier.vue

<template>
  <div class="zoomer" ref="zoomer" @mousemove="moveBG" @mouseout="mouseOut">
    <div class="img normal v-fade"
      v-show="!hoverNow"
      :style="{
        backgroundImage: `url(${imgNormal})`
      }"
    ></div>
    <div
      v-show="hoverNow"
      class="img zoom v-fade"
      ref="imgZoom"
      :style="{
        backgroundImage: `url(${imgZoom})`
      }"
    ></div>
  </div>
</template>

<script>
var isFirefox = require('is-firefox')

export default {
  props: [
    'imgNormal',
    'imgZoom'
  ],
  data () {
    return {
      hoverNow: false,
      isFirefox: isFirefox
    }
  },
  methods: {
    moveBG: function(ev) {
      this.hoverNow = true
      
      var container = this.$refs.zoomer
      var imgZoom = this.$refs.imgZoom

      var e = {
        w: imgZoom.offsetWidth,
        h: imgZoom.offsetHeight
      };

      var c = {
        x: Math.round(
          (ev.clientX - (container.offsetLeft - window.scrollX)) / (e.w / 100)
        ),
        y: Math.round(
          (ev.clientY - (container.offsetTop - window.scrollY)) / (e.h / 100)
        )
      };

      imgZoom.style.backgroundPosition = c.x + "% " + c.y + "%";
    },
    mouseOut () {
      if (this.isFirefox) {
        setTimeout(() => {
          this.hoverNow = false
        }, 1)
      } else {
        this.hoverNow = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.zoomer {
  position: relative;
  width: 640px;
  height: 640px;
  border: 0;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  transition: all 0.5s ease-out;

  &:hover {
    cursor: move;
    .normal {
      opacity: 0;
      transform: scale(1.1);
    }
  }
}

.img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, .3);
  transition: all ease-out 0.3s;
}

.normal {
  z-index: 20;
  background-size: contain;
}

img.normal {
  opacity: 0;
  width: 100%;
}

.zoom {
  z-index: 10;
  transition: none;
}

.v-fade {
  display: inherit !important; /* override v-show display: none */
  transition: opacity 0.5s;
}

.v-fade[style*="display: none;"] {
  opacity: 0;
  pointer-events: none; /* disable user interaction */
  user-select: none; /* disable user selection */
}
</style>