Ignore mouseover of text centered over image inside div-CodePudding

I have text centered over an image inside of a div.

<div >
   <div ><img src="dog.jpg" ><div >ONE ONE ONE</div></div>
   <div ><img src="dog.jpg" ><div >TWO TWO TWO</div></div>
   <div ><img src="dog.jpg" ><div >THREE THREE</div></div>
</div>

When the image is mouseover'd, the image is enlarged with CSS transform: scale(1.2)

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

My problem is, if the text inside the div (centered over image) is mouseover'd, the .panel:hover is ignored and goes back to normal state. How can I ignore/disable the text in case the text is mouseover'd and keep transform: scale(1.2); active?

Live demo here https://vendbits.com/wp_gpl/

Thanks in advance.

CodePudding user response：

you can add pointer-events: none; to the text

.panel-text{
   pointer-events: none;
}