Как реализовать анимацию фона при hover при начальном background-size: cover;?

Question

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

Есть блок с начальным background-size: cover; необходимо увеличивать фон при событии hover. В примерах что нашёл в сети начальные значения background-size: 100% 100%; мне это не подходит т.к. фоновая картинка при таких начальных значениях смотрится криво. Подскажите как реализовать.

Answer 1

[Stalker_RED]

Для плавного увеличения подходит
transform: scale();
Можно задать родителю overflow: hidden, чтобы не увеличивался размер самого элемента.
jsfiddle.net/3uxt624f/1/embedded/result,js,html,css

Answer 2

[Алексей Скляров]

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

Answer 3

[cssfish]

анимируйте scale для контейнера, с фоном в cover вы ничего не наанимируете.