figure.zoom style='background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)' onmousemove='zoom(event)'
img src='//res.cloudinary.com/active-bridge/image/upload/slide1.jpg'
View Compiled
figure.zoom {
& img:hover {
opacity: 0;
}
img {
transition: opacity .5s;
display: block;
width: 100%;
}
background-position: 50% 50%;
position: relative;
width: 500px;
overflow: hidden;
cursor: zoom-in;
}
View Compiled
function zoom(e){
var zoomer = e.currentTarget;
e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
x = offsetX/zoomer.offsetWidth*100
y = offsetY/zoomer.offsetHeight*100
zoomer.style.backgroundPosition = x + '% ' + y + '%';
}
This Pen doesn't use any external CSS resources.