Переходы CSS в разные стороны

Question

Я пытаюсь заполнить обертку (600x600px) при наведении курсора на меньшие ящики внутри него. Для ящика в верхнем левом углу это легко сделать, используя регулярную функцию синхронизации времени, но при попытке увеличить в других направлениях я застрял.

Так у меня есть следующие:

#allbox { 
    background: #bbb; 
    width: 600px; 
    height: 600px; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0 
} 

с коробками:

div.box1 { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
} 

div.box2 { 
    position: absolute; 
    top: 0%; 
    left: 37.5%; 
} 

Для перехода я использую:

#div1 {-webkit-transition-timing-function: linear;} 
#div1 {transition-timing-function: linear;} 
div.box1:hover { 
    width: 600px; 
    height: 600px; 
} 

Но я не могу понять, хороший способ сделать это для следующего окна.

Answer 1

Ниже приведен пример с использованием z-index, поддерживающий зависание сверху.

#allbox { 
 
    background: #bbb; 
 
    width: 600px; 
 
    height: 300px; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; left: 0; bottom: 0; right: 0 
 
} 
 
#allbox div { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0%; 
 
    width: 33.33%; 
 
    height: 50%; 
 
    transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 1s linear; 
 
} 
 
div.box1 { 
 
    left: 0; 
 
    background: blue; 
 
} 
 
div.box2 { 
 
    left: 33.33%; 
 
    background: red; 
 
} 
 
div.box3 { 
 
    left: 66.66%; 
 
    background: green; 
 
} 
 
#allbox div:hover { 
 
    z-index: 2; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 0s linear; 
 
}

<div id="allbox"> 
 
    <div class="box1"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
    <div class="box3"> 
 
    </div> 
 
</div>

Answer 2

Я думаю, мы просто добавляем «left: 0;» в состояние зависания.

div.box2:hover { 
    left: 0; 
    width: 600px; 
    height: 600px; 
} 

Надеюсь, это поможет вам.