Ignore mouseover of text centered over image inside div

Question

I have text centered over an image inside of a 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>
           

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.

Answer 1

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

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