Как сделать анимацию по типу transforms scale для фоновой картинки?

Question

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

Добрый день! Часто пользуюсь таким эффектом для картинок когда при наведении картинка увеличивается внутри блока с overflow:hidden; css эффекта выглядит примерно так:

.block {
       width: 200px;
       height: 200px;
       overflow: hidden;
}

.block img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display:block;
	
	-webkit-transition:all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out;
	-o-transition:all 0.4s ease-out;
	-ms-transition:all 0.4s ease-out;
	transition:all 0.4s ease-out;
}

.block:hover img {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
}

А как сделать такой эффект для фоновой картинки?

Answer 1

[Дима Паутов]

background-size менять. Но я не советую, т.к. анимация с рывками и лагами.
Возьмите блок, у которого указана фоновая картинка и анимируйте его

Comments

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

Да у меня кстати background-size: cover; указан =)

Answer 2

[sergski]

да также)

.block  {
background: url();
transition: all 1s ease;
}

.block:hover {
transform:scale(1.1);
}

Comments

[sergski]

https://codepen.io/Snowsides/pen/vZyQwP