使用淡入淡出CSS动画时出现怪异的闪烁

Question

我要在另一个div上制作一个div，因此，当您将鼠标悬停在顶部div上时，您会看到下面的那个。 背景颜色是相同的，但是当我检查它时，它会在动画完成前使这种奇怪的颜色出现：

我尝试了在网上和这里找到的所有东西，但没有帮助。

有人知道如何解决吗？

提前谢谢。

#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>