忽略div内以图像为中心的文本的鼠标悬停

我把文本放在div内部图像的中央。

<div class="row">
   <div class="col-md-4"><img src="dog.jpg" class="panel"><div class="panel-text">ONE ONE ONE</div></div>
   <div class="col-md-4"><img src="dog.jpg" class="panel"><div class="panel-text">TWO TWO TWO</div></div>
   <div class="col-md-4"><img src="dog.jpg" class="panel"><div class="panel-text">THREE THREE</div></div>
</div>
           

当图像被鼠标悬停时,将使用CSS transform:scale(1.2)放大图像

.panel:hover {
    transform: scale(1.2);
}

我的问题是,如果div中的文本(位于图像的中心)被鼠标覆盖,则。面板:悬停被忽略并返回正常状态。如果文本被鼠标悬停并保持变换,如何忽略/禁用文本:缩放(1.2);忙碌的

现场演示在此 https://vendbits.com/wp_gpl/

提前谢谢。