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


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

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

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

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

2   26   2014-01-23 10:09:05

2 ответа:

Ответ для тех, кто хочет взломать CSS transitioning zooming, чтобы применить его к background-size: cover;

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

<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);
}
<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>

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

Демо Здесь