Я пытаюсь заполнить обертку (600x600px) при наведении курсора на меньшие ящики внутри него. Для ящика в верхнем левом углу это легко сделать, используя регулярную функцию синхронизации времени, но при попытке увеличить в других направлениях я застрял.Переходы CSS в разные стороны
Так у меня есть следующие:
#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;
}
Но я не могу понять, хороший способ сделать это для следующего окна.
Нужна ваша HTML часть, чтобы понять это правильно. Пожалуйста, отредактируйте этот вопрос и добавьте часть HTML. – Roy