background-transition с размером фона: обложка

Question

На это, возможно, уже найдется ответ, но я еще не нашел его после поиска.

У меня есть серия divs с фоновыми изображениями. Размер установлен на background-size: cover.

Но я хочу иметь возможность увеличения и увеличения изображений при наведении. Этот переход не работает с атрибутом обложки. На самом деле изображение масштабируется, но без эффекта перехода. Он мгновенно переходит с «крышки» на 110%. Он отлично работает, когда исходный размер фона был установлен как 100%.

Но при этом при изменении размера страницы изображение кажется черепицей позади div, чего я не хочу. Обложка всегда держит ее в центре, чего я хочу.

Любые советы, оценивающие, как иметь переход с ростом или с тем же эффектом.

Ilmiont

Answer 1

Вы не можете использовать ключевые слова (например, как покрытие) при использовании CSS анимации для фона размера.

Больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Соответствующий текст:

фон-размер - да, как повторяемый список простого списка в длины, процент или известково(); когда оба значения являются длинами, они составляют , интерполированные как длины; когда оба значения являются процентами, они составляют , интерполированные в процентах; в противном случае оба значения преобразуются в . Функция calc(), которая представляет собой сумму длины и процента (каждый , возможно, нуль), и эти функции calc() имеют каждую половину интерполированного как действительные числа. , Это означает, что значения ключевых слов не являются анимированными.

Один из подходов к получению этого эффекта заключается в размещении элемента с фоновым изображением в оберточном элементе с переполнением и приложением масштабного преобразования.

.wrapper { 
 
    width:300px; 
 
    height:400px; 
 
    overflow:hidden; 
 
} 
 
.image { 
 
    background:url("http://placekitten.com/g/500/500"); 
 
    background-size:cover; 
 
    width:100%; 
 
    height:100%; 
 
    transition: transform 2s; 
 
} 
 

 
.image:hover { transform:scale(1.1) }

<div class="wrapper"> 
 
    <div class="image"></div> 
 
</div>