Pure JS/CSS image zoom on click

zoomImage.css

picture {
  cursor: zoom-in;
  height: 0;
  max-height: 1250px;
  max-width: 1400px;
  padding-top: 50%;
  position: relative;
  width: 100%;

  &::before {
    content: '';
    display: block;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }


  img {
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

zoomImage.js

//Confere se o DOM Carregou
function ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }
//Adiciona classe 'zoomed' a imagem
    function imageClick(e) {
        e.preventDefault();
        this.classList.toggle('zoomed');
    }
//Faz a tecla ESC sair do zoom
    function handleEsc(e) {
        if (e.keyCode == 27) {
            var zoomedImages = document.querySelectorAll('img.zoomed');
            Array.prototype.forEach.call(zoomedImages, function(el, i) {
                el.classList.toggle('zoomed');
            });
        }
    }
//Executa a função
ready(function() {
        var images = document.querySelectorAll('article img');
        Array.prototype.forEach.call(images, function(el, i) {
            el.addEventListener('click', imageClick);
        });

        document.addEventListener('keyup', handleEsc);
    });