Почему срабатывает hover в chrome при наведении на скрытую часть изображения через overflow?

Question

[kauzlein]

https://jsfiddle.net/u5yam6hb/1/

Используются, "длинные" изображения скрытые через overflow.
Суть в том, что в Chrome срабатывает анимация при наведении на скрытую часть изображения. В других браузерах проблема не повторяется. В примере добавил один блок сверху для наглядности.

С чем это связано? Как исправить?

Comments

[svarnoi420]

В обще не стоит иконки и декоративные элементы вставлять через тег img. Лучше использовать свойство background.

[kauzlein]

svarnoi420: Благодарю за совет. Учту на будущее.

Answer 1

[AlikDex]

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

Или добавить:

.square-item {
    position: relative;
}

Comments

[kauzlein]

Спасибо, работают оба варианта.

Answer 2

[Артем Каюн]

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