function setZoom({ container, imageUrl }) {
   const image = document.createElement('div')
   image.classList.add('photo')
   image.style.backgroundImage = 'url(' + imageUrl + ')'

   container.appendChild(image)
   container.addEventListener('mouseover', () => image.style.transform = 'scale(2)')
   container.addEventListener('mouseout', () => image.style.transform = 'scale(1)')

   container.addEventListener('mousemove', ({ pageX, pageY }) => {
     const { offsetWidth, offsetHeight } = container
     const offsetLeft = container.getBoundingClientRect().left
     const offsetTop = container.getBoundingClientRect().top

     console.log('offsetLeft', offsetLeft)
     console.log('offsetTop', offsetTop)

     image.style.transformOrigin = ((pageX - offsetLeft) / offsetWidth) * 100 + '% ' + ((pageY - offsetTop) / offsetHeight) * 100 +'%'
   })
 }


//Init
setZoom({
  container: document.querySelector('.img-container'),
  imageClass: 'photo',
  imageUrl: document.querySelector('.img-container').href
})