FFxSquall
@FFxSquall
Могу писать код, могу не писать

Как сделать правильный transition?

Даны блоки которые при наведении должны становиться больше и перекрывать блоки которые находятся выше и ниже. Я реализовал это так: jsfiddle.net/0n6np4pj
Проблема в том, что не могу с помощью transition добиться эффекта, как будто блок просто плавно расширяет свои границы во все стороны одновременно. Можно ли это реализовать с помощью transition или ещё придется переделать, что-то в верстке?
  • Вопрос задан
  • 2381 просмотр
Решения вопроса 1
Mr_Smitt
@Mr_Smitt
Если не трогать html, то думаю это поможет
* {
    box-sizing: border-box;
}
.content {
    padding: 10px 20px;
}
.list-wraper {
   position: relative;
   padding: 0px;
   height: 72px;
}
.list-item {
   background-color: #fff;
   position: absolute;
   padding: 0;
    width: 100%;
   transition: all 200ms ease;
   -moz-transition: all 200ms ease;
   -webkit-transition: all 200ms ease;
   -o-transition: all 200ms ease;
    border: 1px solid #ccc;
    box-sizing: content-box;
}
.list-item:hover {
    z-index: 1;
    padding: 4px;
    margin: -4px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
black_wolf1894
@black_wolf1894
Junior Front End Developer
* {
        box-sizing: border-box;
}

.content {
	padding: 10px 20px;
}

.list-wraper {
	height: 100px;
	position: relative;
	border: 1px solid #ccc;
	margin-bottom: 10px;
    width: 300px;
    transition: 0.2s;
}

.list-item {
	position: relative;
	background-color: #fff;
	height: 100%;
	width: 100%;
}

.list-wraper:hover{
	transform: scale(1.3, 1.6);
	z-index:100;
}


Я думаю так будет правильней!
Префиксы сам добьешь!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы