JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <hoverable-image src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"></hoverable-image>
</div>

























<script id="hoverable-image" type="text/x-template">
  <div class="hoverable-image" @mousemove="mousemove">
    <img :src="src">
    <span class="mouse" :style="{left: offsetX + 'px', top: offsetY + 'px'}"></span>
  </div>
</script>

CSS

body {
  margin: 0;
}

.hoverable-image {
  position: relative;
}

.hoverable-image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.hoverable-image .mouse {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 0, 0.5);
}

JavaScript

Vue.component('hoverable-image', {
  template: '#hoverable-image',
  props: ['src'],
  data() {
    return {
      offsetX: -100,
      offsetY: -100,
    }
  },
  methods: {
    mousemove(e) {
      this.offsetX = e.clientX - 25;
      this.offsetY = e.clientY - 25;
    }
  }
})

new Vue({
  el: '#app',
})