css фон размер обложка

Question

Hei. Это звучит просто, но это не так, если вы имеете дело с динамическим контентом. У меня есть контейнер с фоновым изображением, которое покрывает контейнер. При наведении фона размер фона должен быть на 2% больше (или наоборот) не имеет значения) Есть ли способ достичь этого?

.container 
    background-size: 102% !important //here it should be cover + 2% 
    background-position: center 
    +transition(all 0.3s ease-in-out) 
.container:hover 
    background-size: 100% !important //here it should be cover 

Answer 1

Боюсь, что вы не можете манипулировать свойством обложки с помощью calc или чего-нибудь подобного, чтобы достичь 102% -ной манипуляции. Как я вижу, у вас есть два варианта. Один из них - использование JavaScript и имитирующего поведения обложки, другое - для установки изображения на псевдоэлемент в этом контейнере. Что-то вроде этого.

.container { 
    position: relative; 
    overflow: hidden; 
    width: ###; 
    height: ###; 
} 

.container:before { 
    position: absolute; 
    content: ''; 
    width: 100%; 
    height: 100%; 
    background: url('bg.png') cover center; 
} 

.container:hover:before { 
    transform: scale(1.02); 
} 

Это может быть немного хлопот, чтобы бороться с содержанием вашего контейнера, однако самый простой, что вы можете сделать это создать еще один абсолютно расположенный .content DIV внутри него, что только охватывает всю область.

Answer 2

Вместо того, чтобы сделать это на 2% больше, не могли бы вы просто сделать его установленным. Было бы намного проще установить размер, и тогда вы могли бы сделать именно то, что хотите.

E.G.

background-size: 120px 100px; 
background-position: center; 

и т.д.