Zoom

by Lazaro Contreras

HTML

<img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=124" />
<div class="zoom">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=124" style="transform: scale(3);" />
</div>

CSS

* {
  margin: 0;
}

.zoom {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: white;
  border: 2px solid black;
  border-radius: 50%;
  overflow: hidden;
  cursor: none;
}

.zoom img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

JavaScript

var img = document.querySelector('.img');
var zoom = document.querySelector('.zoom');
var imgz = document.querySelector('.zoom img');
window.addEventListener('mousemove', Zoom);
function Zoom(e) {
  zoom.style.top = e.clientY - 25 + 'px';
  zoom.style.left = e.clientX - 25 + 'px';
  imgz.style.top = -((e.clientY - 42) * 3) + 'px';
  imgz.style.left = -((e.clientX - 42) * 3) + 'px';
}