weird flickering when using fade css animation - html

Question

I'm making a div over another div, so when you hover the top div, you will see the one under it.
the background colors are the same, but when I check it, it makes this weird color before the animation is complete:
I tried all kind of stuff I found online and here but nothing helped.
does anyone know how to fix it?
thanks in advance.
#morningEtgarWrap{
position:relative;
width:25%;
height:260px;
}
#morningEtgar, #morningEtgarDes{
z-index:90;
text-align:center;
}
#morningEtgarExp, #morningEtgar{
background-color:#7126C6;
position:absolute;
width:100%;
height:100%;
text-align:center;
}
#morningEtgarDes, #morningEtgarName{
height:70px;
background-color:#FCED1D;
width:100%;
position:absolute;
bottom:0;
}
#morningEtgarImg{
padding:20px;
max-width:60%;
}
.headDesMorningEtgar{
font-size:14pt;
letter-spacing:2px;
}
#morningEtgarDes{
padding:10px;
}
#morningEtgarWrap:hover #morningEtgar{
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform: translate3D(0, 0, 0);
}
#morningEtgarWrap:hover #morningEtgarDes{
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform: translate3D(0, 0, 0);
}
<div id="morningEtgarWrap">
<div id="morningEtgar">
<img id="morningEtgarImg" src="http://localhost/et-garim/wp-content/uploads/2019/12/Asset-2-1.png"/>
</div>
<div id="morningEtgarDes">
<div><span class="headDesMorningEtgar"><b>עתגר בוקר</b></span>
<br/>
לחת צורק מונחף, בגורמי מגמש לפתיעם.<br/> <b>עוד ></b>
</div>
</div>
<div id="morningEtgarExp">
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור.
</div>
<div id="morningEtgarName">
<div><span class="headDesMorningEtgar"><b>עתגר בוקר</b></span>
</div>
</div>