Как сделать анимацию приближения при наведении?

Question

[VladimirMelnik]

Как сделать чтобы из размера background-size: contain при наведении размер background-size становился contain + 10%

Comments

[Дмитрий Локшин]

Нужно увеличивать сам блок с фоном через transform: scale(); а родительскому блоку задать oveflow: hidden чтобы обрезать увеличение блока.
Также таким способом через transition можно задать плавность анимации.

Answer 1

[Павел]

htmlbook.ru/css/transition

на hover делаешь все что нужно при наведении и transition плавно это делает

Comments

[VladimirMelnik]

Дело в том что contain выставляет background-size больше ста и нельзя узнать какой. На transition можно ставить только цифровое значение. Если выставить на backround-size: 150%, то на маленьких экранах изображение в начале уменьшится (чего не должно быть), а потом при наведении увеличится

[Павел]

VladimirMelnik: а если использовать calc? calc(100% + 50px) или calc(100% + 10%)

[Froggyweb]

transform: <функция> [<функция>]* | none
scale
Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

[VladimirMelnik]

Transform увеличивает весь div, а не только его background-size

[VladimirMelnik]

mrusklon: Дело в том что background-size: contain может выставить разный размер в зависимости от размеров окна и нельзя поставить точное значение процентов для calc