Как решить такой вопрос с анимацией размера картинки при ховере?

Question

[Alice777]

https://jsfiddle.net/cdq9ac4v/
Набросал два примера.
В первом примере картинке присвоено свойство background-size: cover;, которое растягивает картинку по контейнеру (соответственно она пропорционально по центру)

Во втором примере картинке я это свойство не присваивал дабы добиться необходимого мне эффекта(мне нужно чтобы картинка изменяла размер не пропорционально, но была растянута по контенеру и была по центру)

Как это реализовать?

Comments

[Александр Лысенко]

как же не пропорционально, если у вас заданы блин размеры 300 на 300, а потом 100 на 100

[Alice777]

Александр Лысенко: я имею ввиду эффект, когда при уменьшении изображения получалось вот так
а не вот так

[one_day]

transform: scale(.15, .15);

Answer 1

[JackShcherbakov]

Не совсем понятно, но могу посоветовать просто не div анимировать, а саму картинку! Короче удалите все дивы и анимируйте саму картинку, измените только ширину так, чтобы браузер понял что надо сделать.