Как убрать проблему с тенью и размытость у изображений при наведении?

Question

[Semmy_99]

Здравствуйте,помогите пожалуйста разобраться.
Возникло 2 проблемы:
1. При наведении тень размывается,а затем обратно возвращается в прежнее состояние. Ранее мне говорили ,что нужно задать padding для решения этой задачи,но дело в том что у изображения есть рамка и при установки внутренних отступов теряется тот визуальный вид , который хотелось бы получить. Можно ли решить данную задачу другим способом ?
2. При наведении на изображение оно размывается и так же как с тенью в итоге возвращается в нормальное состояние. С чем это связано и как решить проблему?

Ссылка на код

Answer 1

[Александр Аксентьев]

Тень бесится от того что при наведении border ставится.
Изображение с трудом перерендеривается потому что размер слишком большой. Из-за этого и "прыгает" качество скорее всего.

Сделать нормальный размер превью и убрать бордер при наведении.

Comments

[Semmy_99]

По поводу изображения - вы правы,но проблема с тенью не связана с border'ом https://jsfiddle.net/4xkbL9ge/4/

[Александр Аксентьев]

Jack Azizov: это все в целом связано с тем что происходит анимация я так думаю. Как-бы рендерится в полсилы +/-. Это норма для CSS анимаций.
Подробнее не расскажу т.к. не владею информацией.
Нужно что-то менять в общем для достижения нужного резуьтата :)