Как увеличить фоновое изображение на div с размером фона

Я хочу, чтобы элемент div растянулся на ширину 33%, с фоновым изображением, сделанным в css

background-image:url(); background-size:cover

Как мне оживить увеличение изображения фона в div на мыши или mouseneter, есть ли плагин, который может это сделать? Фоновый div должен использовать фон-размер: обложка, потому что это эластичная страница.

У меня еще нет скрипки, потому что я не знаю, где и как начать

Ответ 1

Ответ для тех, кто хочет взломать масштабируемое преобразование CSS, чтобы применить его к размеру фона: обложка;

- если нет, то прочитайте второй раздел для стандартных способов достижения такого эффекта

<div class="wrap">
    <div></div>
    <p>hello</p>
</div>


html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

Демо (с помощью background-size: cover; для перехода/увеличения элемента)

Как вы сказали, необходимо изменить размер cover, поэтому я придумал трюк, о котором я говорил ранее, здесь у меня есть дочерний элемент, вложенный в элемент position: relative;, где у меня есть дочерний элемент, position: absolute; с background-image с background-size установленным на cover, а затем на hover родителя, я увеличиваю элемент с помощью свойства transform: scale(2,2);.

Кроме того, при работе с этим решением важно, чтобы нам нужно установить z-index элемента position: absolute; ниже, чем те элементы, которые вы будете размещать внутри, поэтому он будет действовать как background

Ответ для тех, кто хочет очистить HTML и CSS

Вы не можете анимировать background-size, если это значение равно cover, так что вам понадобится px или %, либо вы можете использовать тег img с свойством transform: scale(2,2);.

Демо

Демо 2 (увеличение или уменьшение из центра)

div {
    height: 200px;
    width: 200px;
    background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover {
    background-size: 150% 150%;
}

Если вы хотите придерживаться background-size: cover;, вам придется обернуть весь элемент внутри элемента оболочки с фиксированными размерами с помощью overflow: hidden;, а не масштабировать дочерний элемент на hover родительского элемента.

Как вы прокомментировали, для примера тега img вы можете использовать transform: scale(2,2); для достижения этого, если родительский элемент установлен на overflow: hidden;

Демо 2

div {
    height:300px;
    width: 300px;
    overflow: hidden;
}

div img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

div:hover img {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}

Ответ 2

<script>
    function animate(){
        document.getElementById('a').style.webkitTransitionDuration='1s';
        document.getElementById('a').style.backgroundSize="200% 200%";
    }
</script>
<div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url('http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png') no-repeat;background-size: 100% 100%; ">
</div>

Вы можете сделать что-то подобное для веб-браузеров.

Демо здесь