JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenedor">

    <div class="zoomPad">
        <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-corredera-t.jpg" alt="" />
        <div class="zoomPup">
            <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-corredera-t.jpg" />
        </div>
        <div class="zoomWindow">
            <div class="zoomWrapper">
                <div class="zoomWrapperTitle">La Corredera</div>
                <div class="zoomWrapperImage">
                    <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-corredera-g.jpg?0.234323" />
                </div>
            </div>
        </div>
        <div class="zoomPreload">Cargando zoom</div>
    </div>

<div id="division" style="height: 40px; clear:both"></div>

    <div class="zoomPad">
        <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-fontanilla2-t.jpg" alt="" />
        <div class="zoomPup">
            <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-fontanilla2-t.jpg" />
        </div>
        <div class="zoomWindow">
            <div class="zoomWrapper">
                <div class="zoomWrapperTitle">La Fontanilla</div>
                <div class="zoomWrapperImage">
                    <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-fontanilla2-g.jpg?0.342345" />
                </div>
            </div>
        </div>
        <div class="zoomPreload">Cargando zoom</div>
    </div>

</div>

CSS

* {
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}


.contenedor {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 10px 0 80px 10px;
    overflow: hidden;
}


.zoomPad {
    position: relative;
    float: left;
    z-index: 100;
    cursor: crosshair;
}


.zoomPad > img {
    opacity: 1;
    border: 1px solid rgb(102, 102, 102);
}


.zoomPup {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    z-index: 101;
    visibility: hidden;
}


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



.zoomWindow {
    position: absolute;
    top: 0;
    left: 400px;
    visibility: hidden;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(102, 102, 102);
    z-index: 102;
}


.zoomWrapper {
    width: 300px;
    height: 300px;
}


.zoomWrapperTitle {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.48);
    color: rgb(255, 255, 255);
    text-align: center;
    z-index: 103;
}


.zoomWrapperImage {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.zoomWrapperImage > img {
    position: absolute;
    left: 0;
    top: 0;
}



.zoomPreload {
    position: absolute; 
    top: 50%;
    left: 50%;
    visibility: visible;
    opacity: 0.8;
    color: rgb(51, 51, 51);
    font-size: 12px;
    font-family: Tahoma;
    text-decoration: none;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
    padding: 8px;
    text-align: center;
    background-image: url(http://www.mind-projects.it/projects/jqzoom/images/zoomloader.gif);
    background-repeat: no-repeat;
    background-position: 43px 30px;
    z-index: 110;
    width: 90px;
    height: 43px;
    margin-top:...

JavaScript

var lib = {

    Evento : function(elemento, nomevento, fnc) {

        elemento.addEventListener(nomevento, fnc, false);

    },


    cssComputado : function(obj, styleProp, psElem) {

        if (obj == null) { return 0; }

        var pseudoElem = psElem || null;
        var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];

        return valor;
    },


    posCursorObj : function(evt, obj) {

        var ev = evt;
        /* var obj = obj || ev.target;
        obj.style.position = 'relative'; // el elemento ya está en posición relativa */

        posX = ev.layerX;
        posY = ev.layerY;

        return {x : posX, y : posY};
    }
}





var zoomer = {

zoompad : [], zoompup : [], zoomWindow : [], zoompupImage : [], zoomWrapperContenedor : [], zoomWrapperImage : [], escalaW : [], escalaH : [], zoompupW : [], zoompupH : [], zoompadW : [], zoompadH : [], zoomWrapperImageW : [], zoomWrapperImageH : [], zoompupWCentro : [], zoompupHCentro : [], zoomPreload : [], temporizador : null,


    zoomerInit : function(i) {

        zoomer.temporizador = setTimeout(function() {

            if ((document.querySelectorAll('.zoomPup').length) == i) {clearTimeout(zoomer.temporizador); return false;}

            zoomer.zoompad[i] = document.querySelectorAll('.zoomPad')[i];
            zoomer.zoompup[i] = document.querySelectorAll('.zoomPup')[i];
            zoomer.zoomWindow[i] = document.querySelectorAll('.zoomWindow')[i];

            zoomer.zoompupImage[i] = zoomer.zoompup[i].getElementsByTagName('img')[0];
            zoomer.zoomWrapperContenedor[i] = document.querySelectorAll('.zoomWrapperImage')[i];
            zoomer.zoomWrapperImage[i] = zoomer.zoomWrapperContenedor[i].getElementsByTagName('img')[0];
            zoomer.zoomPreload[i] = document.querySelectorAll('.zoomPreload')[i];

            var n = i, zoomImg = [];
            zoomImg[i] = new Image();
            zoomImg[i].src = zoomer.zoomWrapperImage[i].src;

            zoomImg[i].onload =...