Почему появляется такой эффект?

Question

[Алексей]

Всем привет!
Сразу приведу код: https://jsfiddle.net/v9hx23qs/3/
При наведении на верхнюю картинку появляется две проблемы:
1. При наведении на верхнюю картинку по идее она должна увеличиться, но она сползает вправо-вниз (это видно во всех браузерах)
2. При наведении на верхнюю картинку, у нижней пропадает border-radius (это видно только в Хроме (у меня стоит 56 версия)).
Если у кого-то не получается воспроизвести, вот как это выглядит (сори что в облаке, ошибка при загрузке файла на тостер):
https://cloud.mail.ru/public/J3bu/QgShWTZRo

Answer 1

[Дима Паутов]

Решение 1го пункта

2й пункт, вроде как из за overflow. Нужно закруглять саму картинку!

Comments

[Михаил]

Второй пункт, скорее всего из-за того, что прописан transition у класса img_absolute это как-то влияет на все элементы с таким классом при перерисовки, то есть изменений в итоге ни каких нет, но пока идет перерасчет (анимация), пропадает border-radius, так, что анимацию лучше делать отдельным классом

[Михаил]

хотя нет, такое поведение пропадает, только если у второй картинки нет трансформа и позация не абсолютная

[Алексей]

Спасибо! Все получилось

Answer 2

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/v9hx23qs/5/

Comments

[Алексей]

Спасибо. У вас только картинка не центрируется. Я взял этот пункт у Димы Туркова