Skip to content

Instantly share code, notes, and snippets.

@galulex
Last active August 29, 2015 14:25
Show Gist options
  • Save galulex/98161dac26151046e6a3 to your computer and use it in GitHub Desktop.
Save galulex/98161dac26151046e6a3 to your computer and use it in GitHub Desktop.
zoom
$(document).on('mousemove', '.zoom', function (e){
var rect = e.target.getBoundingClientRect(),
offsetX = e.clientX - rect.left,
offsetY = e.clientY - rect.top;
x = offsetX/this.offsetWidth*100
y = offsetY/this.offsetHeight*100
this.style.backgroundPosition = x + '% ' + y + '%';
})
$(document).on('mouseenter', '.zoom', function (e){
this.style.backgroundImage = 'url(' + $(this).find('img').attr('src') + ')';
})
$(document).on('mouseleave', '.zoom', function (e){
this.style.backgroundImage = '';
})
.zoom img {
transition: opacity .5s;
&:hover {
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment