Issues with transition lag for central #about div when moving mouse over around other <div>s. How should I proceed?

See more:

Javascript

CSS

HTML

I am learning on getting into the web dev career and so far have been building a portfolio website simultaneously with something new learned everyday.

I am building the portfolio with 5 main DIVs laid out as a kind of an offset Grid and used JS to have the div with mouseover appear larger with other divs 'moving out of the way' for the mouseover div to enlarge (I am not using the transform = scale()). Every div grows in their own way and others move out respectively and everything returns back to their original scale and location on mouseleave. Page looks like below; Site layout

The problem is, as I have set the transition property value to transition: .5s ease-in-out; for all the divs, moving the mouseover different side divs quickly seems to affect the #about Div's transition. It lags quite a bit. I am quite new to web dev so my code may not be the best in terms of readability, haven't mastered that skill yet so apologies in advance. Relevant HTML, CSS and JS code below;
html

<div class="middleDiv">

            <div class="innerDiv eduWork" id="education">Education</div>
            <div class="innerDiv skillCont" id="skills">Skills</div>
            <div class="innerDiv skillCont" id="contact">Contact</div>
            <div class="innerDiv about" id="about">About</div>
            <div class="innerDiv eduWork" id="work">Employment History</div>
</div>

css

.middleDiv {

    align-self: center;
    background-color: orange;
    height: 90%;
    width: 95%;
    position: absolute;
    top: 5%;
    left: 2.5%;
    margin: 0;
    padding: 0;
    border: none;
}

.innerDiv{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    background-color: beige;
    box-sizing: border-box;
    transition: .5s ease-in-out;

}

#education{
    
 
    top: 0%;
    left: 0%;
    border-right: .3em solid black;
    
}

#skills{
  
    top: 0%;
    right: 0%;
    border-bottom: .3em solid black;
}

#contact{

    left: 0%;
    bottom: 0%;
    border-top: .3em solid black;
}

.about{
    height: 20%;
    width: 20%;
    top: 40%;
    left: 40%;
    z-index: 1;
    border: .3em solid black;
}

#work{
    bottom: 0%;
    right: 0%;
    
    border-left: .3em solid black;
}
.eduWork{
    height: 40%;
    width: 60%;
}
.skillCont{
    height: 60%;
    width: 40%;
}

/*-----------------------------------------------------------------------------*/
/* ---------------------------on eventListeners------------------------------- */
.growEduWork{
    height: 60%;
    width: 80%;
}
.growSkillCont{
    height: 80%;
    width: 60%;
}
.eduWorkOnMouseOverSkillCont1{
    height: 20%;
    width: 80%;
}
.eduWorkOnMouseOverSkillCont2{
    height: 60%;
    width: 40%;
}

.EduWorkOnMouseOverEduWork{ 
    height: 20%;
    width: 40%;
}
.SkillContOnMouseOverEduWork{ 
    width: 20%;
    height: 80%;
}
.SkillContOnMouseOverAbout{ 
    width: 80%;
    height: 20%;
}
.skillContOnMouseOverEduWork2 { 
    height: 40%;
    width: 60%;
}
.skillContOnMouseOverSkillCont{
    height: 40%;
    width: 20%;
}
.eduWorkOnMouseOverAbout{ 
    height: 80%;
    width: 20%;
}

.growAbout{
    height: 60%;
    width: 60%;
    top: 20%;
    left: 20%;
    border: var(--border);
    
}
.aboutWhenMouseOverEdu{
    top: 60%;
    left: 60%;
}
.aboutOnMouseOverWork{
    top: 20%;
    left: 20%;
}
.aboutOnMouseOverSkill{
    top: 60%;
    left: 20%;
}
.aboutOnMouseOverCont{
    top: 20%;
    left: 60%;
}
/*----------------------------------------------*/

JS

const education = document.querySelector('#education');
const skills = document.querySelector('#skills');
const contact = document.querySelector('#contact');
const about = document.querySelector('#about');
const work = document.querySelector('#work');

education.addEventListener('mouseover', function(e){
    education.classList.add('growEduWork');
    skills.classList.add('SkillContOnMouseOverEduWork');
    work.classList.add('EduWorkOnMouseOverEduWork');
    about.classList.add('aboutWhenMouseOverEdu');
    contact.classList.add('skillContOnMouseOverEduWork2')
})
education.addEventListener('mouseleave', function(e){
    education.classList.remove('growEduWork');
    skills.classList.remove('SkillContOnMouseOverEduWork');
    work.classList.remove('EduWorkOnMouseOverEduWork');
    about.classList.remove('aboutWhenMouseOverEdu');
    contact.classList.remove('skillContOnMouseOverEduWork2')
})

about.addEventListener('mouseover', function(e){
    about.classList.add('growAbout');
    skills.classList.add('SkillContOnMouseOverAbout');
    education.classList.add('eduWorkOnMouseOverAbout');
    contact.classList.add('SkillContOnMouseOverAbout');
    work.classList.add('eduWorkOnMouseOverAbout');
});
about.addEventListener('mouseleave', function(e){
    about.classList.remove('growAbout');
    skills.classList.remove('SkillContOnMouseOverAbout');
    education.classList.remove('eduWorkOnMouseOverAbout');
    contact.classList.remove('SkillContOnMouseOverAbout');
    work.classList.remove('eduWorkOnMouseOverAbout');
})

work.addEventListener('mouseover', function(e){
    work.classList.add('growEduWork')
    education.classList.add('EduWorkOnMouseOverEduWork');
    about.classList.add('aboutOnMouseOverWork');
    contact.classList.add('SkillContOnMouseOverEduWork');
    skills.classList.add('skillContOnMouseOverEduWork2');
});
work.addEventListener('mouseleave', function(e){
    work.classList.remove('growEduWork')
    education.classList.remove('EduWorkOnMouseOverEduWork');
    about.classList.remove('aboutOnMouseOverWork');
    contact.classList.remove('SkillContOnMouseOverEduWork');
    skills.classList.remove('skillContOnMouseOverEduWork2');
});
skills.addEventListener('mouseover', function(e){
    skills.classList.add('growSkillCont');
    work.classList.add('eduWorkOnMouseOverSkillCont1');
    education.classList.add('eduWorkOnMouseOverSkillCont2');
    about.classList.add('aboutOnMouseOverSkill');
    contact.classList.add('skillContOnMouseOverSkillCont');
});
skills.addEventListener('mouseleave', function(e){
    skills.classList.remove('growSkillCont');
    work.classList.remove('eduWorkOnMouseOverSkillCont1');
    education.classList.remove('eduWorkOnMouseOverSkillCont2');
    about.classList.remove('aboutOnMouseOverSkill');
    contact.classList.remove('skillContOnMouseOverSkillCont');
});
contact.addEventListener('mouseover', function(e){
    contact.classList.add('growSkillCont');
    education.classList.add('eduWorkOnMouseOverSkillCont1');
    work.classList.add('eduWorkOnMouseOverSkillCont2');
    about.classList.add('aboutOnMouseOverCont');
    skills.classList.add('skillContOnMouseOverSkillCont');
});
contact.addEventListener('mouseleave', function(e){
    contact.classList.remove('growSkillCont');
    education.classList.remove('eduWorkOnMouseOverSkillCont1');
    work.classList.remove('eduWorkOnMouseOverSkillCont2');
    about.classList.remove('aboutOnMouseOverCont');
    skills.classList.remove('skillContOnMouseOverSkillCont');
});

//---------------------------------------------------------------//

What I have tried:

I have tried increasing and decreasing the transition time, issue only seems to not be there when transition is not used at all, which doesn't look good. Not experienced enough to know where else to investigate, although the only div affected is the central div whose position changes in relation to different eventlisteners so suspect the issues lies within the central #about div.