CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

html, body
{
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

#pics
{
    display: flex;
    flex-direction: column;
    align-items: start;
}
#pics>img
{
    width: 300px;
}

#img_container
{
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: -1;
    transition: all 1s;
}

#img_container>img
{
    transition: all 1s;
}

var TMP =
{
    obj :
    {
        img_list        : null,
        img_container   : null,
        img_on_hover    : null
    },
    status :
    {
        cur             : null,
        none            : 0,
        is_on_hover     : 1,
        is_on_out       : 2,
        full_displayed  : 3
    },
    init()
    {
        this.obj.img_list = document.querySelectorAll("#pics>img");
        this.obj.img_container = document.querySelector("#img_container");
        this.obj.img_on_hover = document.querySelector("#img_container>img");

        this.obj.img_container.addEventListener("transitionstart",() => {update_status();});
        this.obj.img_container.addEventListener("transitionend",() => {update_status(false);});

        let el = this.obj.img_list;

        for(let i=0; i<el.length; i++)
        {
            el[i].addEventListener("mouseover",() => {show_img(i);});
            el[i].addEventListener("mouseout",() => {show_img(i,false);});
        }

        this.status.cur = this.status.none;
    }
}

function update_status(start = true)
{
    // Anpassungen nur nötig, wenn Transition beendet...
    if(!start)
    {
        let st = TMP.status;

        switch(st.cur)
        {
            case st.is_on_hover:
                st.cur = st.full_displayed;
                break;
                
            case st.is_on_out:
                st.cur = st.none;
                TMP.obj.img_container.style.display = "none";
                break;
        }
    }
}

function show_img(ind,show = true)
{   
    let body_rect = document.querySelector("body").getBoundingClientRect();
    let img_rect = TMP.obj.img_list[ind].getBoundingClientRect();
    let fit_v = ((img_rect.width / img_rect.height) > (body_rect.width / body_rect.height));

    let obj = TMP.obj.img_container;
    let img = TMP.obj.img_on_hover;
    let st = TMP.status;

    switch(st.cur)
    {
        case st.none:
        {
            // Noch nichts ausgelöst...
            obj.style.left = img_rect.x + "px";
            obj.style.top = img_rect.y + "px";
            obj.style.width = img_rect.width + "px";
            obj.style.height = img_rect.height + "px";
            obj.style.display = "flex";

            img.src = TMP.obj.img_list[ind].src;

            setTimeout(() =>
            {
                // Hover-Transition beginnt.
                st.cur = st.is_on_hover;

                obj.style.left = "0";
                obj.style.top = "0";
                obj.style.width = "100%";
                obj.style.height = "100%";

                img.style.width = (fit_v) ? "80%" : "auto";
                img.style.height = (fit_v) ? "auto" : "80%";
            },1);

            break;
        }
        case st.is_on_hover:
        {
            // Während der Hover-Animation wurde Bild verlassen / gewechselt
            if(show)
            {
                // Hover über anderem Bild, also einfach nur src wechseln
                img.src = TMP.obj.img_list[ind].src;
            }
            else
            {
                // Bild wurde verlassen, also zurücksetzen
                st.cur = st.is_on_out;

                obj.style.left = img_rect.x + "px";
                obj.style.top = img_rect.y + "px";
                obj.style.width = img_rect.width + "px";
                obj.style.height = img_rect.height + "px";

                img.style.width = (fit_v) ? "100%" : "auto";
                img.style.height = (fit_v) ? "auto" : "100%";
            }

            break;
        }
        case st.is_on_out:
        {
            if(show)
            {
                // Während der Out-Animation => Hover über neuem Bild, also wieder aktivieren...

                // Hover-Transition beginnt neu.
                st.cur = st.is_on_hover;

                obj.style.left = "0";
                obj.style.top = "0";
                obj.style.width = "100%";
                obj.style.height = "100%";

                img.src = TMP.obj.img_list[ind].src;
                img.style.width = (fit_v) ? "80%" : "auto";
                img.style.height = (fit_v) ? "auto" : "80%";
            }

            break;
        }
        case st.full_displayed:
        {
            if(!show)
            {
                // Hover wurde normal verlassen, also zurücksetzen...
                st.cur = st.is_on_out;

                obj.style.left = img_rect.x + "px";
                obj.style.top = img_rect.y + "px";
                obj.style.width = img_rect.width + "px";
                obj.style.height = img_rect.height + "px";

                img.style.width = (fit_v) ? "100%" : "auto";
                img.style.height = (fit_v) ? "auto" : "100%";
            }

            break;
        }
    }
}

window.onload = () => {TMP.init();}

const
    ovl = document.querySelector('figure.ovl'),
    largeImg = ovl.querySelector('img');
function enlargeIt(img) {
    const
        // Seitenverhältnisse von Body und Bild ermitteln:
        boxBody = document.querySelector('body').getBoundingClientRect(),
        ratioBody = boxBody.width / boxBody.height,
        boxImg = img.getBoundingClientRect(),
        ratioImg = boxImg.width / boxImg.height;
    // Bild entspr. Seitenverhältnis einpassen:
    if (ratioImg > ratioBody) {
        largeImg.classList.add('fitVertically');
    }
    // Bild in Overlay eintragen:
    largeImg.src = img.src;
    // Bild groß machen indem wir die Klasse "large" zum Overlay hinzu fügen:
    ovl.classList.add('large');
}
// Eventlistener für Klick irgend wo auf der Seite registrieren
window.addEventListener('click', event => {
    // Wurde innerhalb eines großen Bildes geklickt?
    if (event.target.matches('figure.ovl.large img')) {
        // Bild wieder klein machen indem wir die Klasse "large" löschen:
        ovl.classList.remove('large');
    } else {
        // Wurde auf ein kleines Bild geklickt?
        if (event.target.matches('img.small')) {
            // Ist kein vergößertes Bild vorhanden?
            if (!document.querySelector('figure.ovl.large')) {
                // Bild sofort vergrößern:
                enlargeIt(event.target);
            } else {
                // Das aktuell vergrößerte Bild verkleinern:
                ovl.classList.remove('large');
                // Vergrößern des neuen Bildes vormerken:
                ovl.dataset.toEnlarge = event.target.getAttribute('src');
            }
        }
    }
});
document.querySelector('figure.ovl').addEventListener('transitionend', event => {
    imgSrc = ovl.dataset.toEnlarge;
    // Wurde eine Vergrößerung vorgemerkt
    // und handelt es sich um das Ende der Transition
    // für das Verkleinern?
    if (imgSrc && !ovl.classList.contains('large')) {
        // Vorgemerkte Vergrößerung löschen:
        ovl.dataset.toEnlarge = '';
        // Neues Bild vergrößern:
        enlargeIt(document.querySelector('img[src="' + imgSrc + '"]'));
    }
});

            // Ist kein vergößertes Bild vorhanden?
            if (!document.querySelector('figure.ovl.large')) {
                // Bild sofort vergrößern:
                enlargeIt(event.target);
            } else {
                // Unterscheidet sich das geklickte Bild von dem großen
                if (event.target.getAttribute('src')
                    != ovl.querySelector('img').getAttribute('src')) {
                    // Das aktuell vergrößerte Bild verkleinern:
                    ovl.classList.remove('large');
                    // Vergrößern des neuen Bildes vormerken:
                    ovl.dataset.toEnlarge = event.target.getAttribute('src');
                }
            }