Image "встряхивание" на сОн переходе CSS

Question

У меня есть DIV с этим CSS на парении:

.card:hover { 
    box-shadow: 5px 5px 20px #c4c4c4; 
    margin-top: -5px; 
    margin-left: -5px; 
} 

И внутри этого DIV, у меня есть изображение с этим CSS:

.card .avatar { 
    border-radius: 100px; 
    margin-top: -30px; 
    margin-left: 10px; 
} 

Проблема заключается в том, что изображение, похоже, немного «дрожит», когда происходит переход.

Here's скрипку: https://jsfiddle.net/zudvv4cv/2/

Answer 1

Используйте преобразование собственности вместо края

.card:hover { 
    box-shadow: 5px 5px 20px #c4c4c4; 
    transform:translate(-5px, -5px); 
} 

Убедитесь, что вы использовали все соответствующие префиксы

.card:hover { 
    box-shadow: 5px 5px 20px #c4c4c4; 
    -webkit-transform:translate(-5px, -5px); 
      transform:translate(-5px, -5px); 
} 

Образец https://jsfiddle.net/zudvv4cv/4/

Answer 2

Просто используйте transform: translate(x,y) сделать переход, его игнорирование позиции sourrounding элементов.

transform: translate(-5px, -5px);