My circular divs get stuck midway flipping when hovering and two of my divs can't get above the bottom div on hover

I am trying to make a responsive and functional diagram that when I hover it flips and shows information. So I made this Venn diagram with three circular divs on top of each other and when I hover my mouse over one of the divs it enlarges and flips showing information on the other side. What I get is a buggy transformation when hovering. I am not sure how to make the flipping smoother when hovering because right now I need to get my cursor on a specific area so the circle fully flips around and not get stuck. I tried using margin and padding for the ":hover" but that doesn't really work and it would also look too spaced out. Secondly is that when hovering on the top two circular divs they enlarge (like they are supposed to) and go above each other but never above the bottom circular div. I tried using z-index with a huge number but still doesn't make it go above the divs. Also, on javascript how would I make it so that when hovering the other circles have a blur?

It should look something like what I prototyped on figma. The venn diagram

And here is the HTML, CSS, and Javascript I used to make this version of the venn diagram.

<style>
#ven_diagram {
display: flex;
flex-direction: column;
width: 100%;
height: 355px;
margin-left: auto;
margin-right: auto;
}
#top {
width: 100%;
transform: translateX(0%) translateY(10%);
display: flex;
flex-direction: row;
justify-content: center;

}
#bottom {
width: 100%;    
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
position: relative;
bottom: 24%;
/*transform: translateX(0%) translateY(-40%);*/
}
.circle {
width: 220px;
height: 220px;  
cursor: pointer;
box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.circleactive {
width: 260px;
height: 260px;
z-index: 900;
transition: 1s ease-in; 
}
.circletitle {
position: relative;
z-index: 999;
text-align: center;
font-family: Roboto;
font-style: normal;
font-weight: 900;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 1);
text-shadow: 5px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#circle1 {
background: rgba(33, 218, 223, 1);
transform: translateX(25%) translateY(0%);
transform-style: preserve-3d;
transition: transform 1s ease-in;

}
#circle1:hover {
transform: rotateY(180deg);
}
.circle .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;  
}
.side .circle3p {

  transform: rotateY(180deg);
  display: flex;
  justify-content: space-around;    
}
#circle2 {
background: rgba(95,216, 21, .78);
transform: translateX(-25%) translateY(0%);
transform: translateX(25%) translateY(0%);
transform-style: preserve-3d;
transition: transform 1s ease-in;
}
#circle3 {
background: rgba(253,45, 45, .8);
transform: translateX(0%) translateY(-10%);
transform: translateX(25%) translateY(0%);
transform-style: preserve-3d;
transition: transform 1s ease-in;
}
#circle1 span {
margin-right: 50%;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184,184,184,0.70);
backdrop-filter: blur(4px);
}
#circle2 span {
margin-left: 50%;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184,184,184,0.70);
backdrop-filter: blur(4px);
}
#circle3 span {
font-weight: 500;
font-size: 24px;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184,184,184,0.70);
backdrop-filter: blur(4px); 
}
#circle1p{
display: none;  
}
#circle2p{
display: none;  
}
#circle3p{
display: none;      
}
#section1 {
height: 100vh;
}
#section1 h1{
color: black;
}
</style>

<section id="section1" class="section">
<div id="ven_diagram">
<div id="top" class="absol">
<div id="circle1" class="circle side" onmouseleave="removeActiveClasses();"><span>Mind</span><p class="side circle3p">has to do with how a person thinks, feels and acts as he or she copes with life. A person with good emotional health can feel, express and respond to a wide range of emotions in
healthy ways and form healthy relationships with others</p></div>
<div id="circle2" class="circle side" onmouseleave="removeActiveClasses();"><span>Social</span><p class="side circle3p">has to do with your relationships with others. People with good social health can connect
with and contribute to family, friends, and the wider community</p></div>
</div>
<div id="bottom" class="absol">
<span class="circletitle">Mental Health</span>
<div id="circle3" class="circle side" onmouseleave="removeActiveClasses();"><span>Spiritual</span><p class="side circle3p">has to do with how you find meaning and purpose in your life. People with good
spiritual health have a sense of something bigger than themselves and their own day-to-day lives</p></div>
</div>
<p>Mental wellness according to the World Health Organization, is defined as “a state of well-being in which the individual realizes his or her own abilities, can cope with the normal stresses of life, can work productively and fruitfully, and is able to make a contribution to his or her community.”</p>
</div>
</section>

<script>
// JavaScript Document
const circles = document.querySelectorAll('.circle');

circles.forEach((circle) => {
  circle.addEventListener('mouseover', () => {
    removeActiveClasses();
    circle.classList.add('circleactive');
  });
});

function removeActiveClasses() {
  circles.forEach((circle) => {
  circle.classList.remove('circleactive');  
  
  });
}
</script>

from Recent Questions - Stack Overflow https://ift.tt/3t2Ky7F
https://ift.tt/eA8V8J