In this tutorial, you will learn how to reveal an image portion on circular cursor hover with CSS & Vue.js. Basically, the image is set as a background and an overlay is added. Watch the video below for a detailed tutorial.
<body>
<div id="container" @mousemove="revealImage">
<div id="overlay"></div>
</div>
<script>
var app = new Vue({
el: '#container',
data: {
leftPosition: 0,
topPosition: 0,
overlayHalfWidth: 0,
},
mounted() {
$overlay = document.getElementById('overlay');
$container = document.getElementById('container');
this.overlayHalfWidth = $overlay.clientWidth / 2;
},
methods: {
revealImage: function(e) {
this.leftPosition = e.pageX - $container.offsetLeft;
this.topPosition = e.pageY - $container.offsetTop;
$overlay.style.left = this.leftPosition - this.overlayHalfWidth + 'px';
$overlay.style.top = this.topPosition - this.overlayHalfWidth + 'px';
}
}
})
</script>
</body>body {
margin: 0;
background-color: #f7edeb;
}
#container {
width: 100%;
height: 100vh;
background-image: url('planets.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#overlay {
position: absolute;
z-index: 1;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0 0 0 100vw #f7edeb;
background: #f7edeb;
transition: background 0.2s;
}
#container:hover #overlay {
background: transparent;
}