Как исправить размытое изображение на шкале преобразования

Когда я ставлю transform: scale(1.1); при наведении на какой-то элемент изображение стало размытым. Как исправить эту ошибку?

пример

Ответ 1

Попытайтесь, это отлично работает для меня!

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

Ответ 2

TL; DR- transform: scale фактически масштабирует исходное изображение, и потому, что вы оставляете его в браузере, чтобы выяснить, что должно там идти, вы получили размытое изображение. пытаться

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Аарон Сиблер ответил на этот вопрос.

Эй, ребята, я просто испытал эту загадку. В вашем примере вам нужно будет преобразовать img DOWN нечто вроде "transform: scale (0.7)", а затем масштабировать UP до собственных размеров изображений при наведении, например "transform: scale (1.0)",

Значение шкалы соответствует исходным размерам изображений, а не их текущим размерам на экране, поэтому масштаб 1 всегда равен размеру исходных изображений.

Я использовал это здесь;

http://meetaaronsilber.com/experiments/css3imgpop/index.html