Why does hover work in chrome when hovering over a hidden part of an image through overflow?

Question

css

https://jsfiddle.net/u5yam6hb/1/
Used, "long" images hidden through overflow.
The bottom line is that in Chrome animation is triggered when hovering over a hidden part of the image. The problem does not recur in other browsers. In the example, I added one block on top for clarity.
What is it connected with? How to fix?

Answer 1

.square-items {
    padding: 5px;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    margin: 5px;
    overflow: hidden;
}

Or add:

.square-item {
    position: relative;
}

Answer 2

.square-item {
   pointer-events: none;
}