Как применить переход к свойству background-size

Question

Как применить переход к свойству background-size

0

Я пытаюсь сделать переход на размер фона, как?

    <div class="cell" style="width: 345.53px; height: 210.53px; background-image: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/1521894_10151755196011682_1359230168_n.jpg); position: absolute;-webkit-transition: top 0.5s, left 0.5s; transition: top 0.5s, left 0.5s;" data-delay="2" data-height="200" data-width="331" data-state="move" id="2-2"></div>

    .cell:hover{
        transition: background-size 1s;
        -webkit-transition:  background-size 1s; 
        background-size:cover;
        cursor: pointer;
}

Alan Yong 21 дек. 2013, в 10:18

Источник

1

Как насчет использования Jquery? jqueryui.com/effect
Anup 21 дек. 2013, в 09:17

Теги:

jquery

css

css3

transition

2 ответа

Ещё вопросы

Как насчет использования Jquery? jqueryui.com/effect

rbaker86 · Answer 1 · 2013-12-21T07-49-00.000Z

Не похоже, что он слишком хорошо работает с background-position: cover;

Попробуй это:

<div class="cell"></div>

.cell {
    -moz-transition: background-size 2s ease-in;
    /* WebKit */
    -webkit-transition: background-size 2s ease-in;
    /* Opera */
    -o-transition: background-size 2s ease-in;
    /* Standard */
    transition: background-size 2s ease-in;
    width: 345.53px; 
    height: 210.53px; 
    background-image: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/1521894_10151755196011682_1359230168_n.jpg);
    position: absolute;
    background-size: 150% 150%;
}

.cell:hover{ 
    background-size: 100% 100%;
    cursor: pointer;
}

Обновленная скрипка

Спасибо вам. Я думаю, что это единственный способ ..
Не волнуйтесь. Если это помогло, пожалуйста, установите это как принятый ответ.

Anup · Answer 2 · 2013-12-21T07-35-00.000Z

Посмотрите на этот сайт: -

http://css3.bradshawenterprises.com/cfimg/