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

Question

[Михаил]

Даны блоки которые при наведении должны становиться больше и перекрывать блоки которые находятся выше и ниже. Я реализовал это так: jsfiddle.net/0n6np4pj
Проблема в том, что не могу с помощью transition добиться эффекта, как будто блок просто плавно расширяет свои границы во все стороны одновременно. Можно ли это реализовать с помощью transition или ещё придется переделать, что-то в верстке?

Answer 1

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

Answer 2

[Тимофей Белоусов]

* {
        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;
}

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

Comments

[Mr_Smitt]

Думаю нет. Вы использовали scale у которого есть один неприятный эффект размытия border и текста при анимации думаю здесь это будет неуместно. Параметры 1.3 - 1.6 нарушают пропорцию list-wraper. FFxSquall хотел расширить только границы блока без увеличения текста.

[Михаил]

@Mr_Smitt: Всё правильно, scale в моем случае не подходит

[Тимофей Белоусов]

@Mr_Smitt: Вы написали "должны становиться больше и перекрывать блоки" как написали, так и сделал. При масштабирование нужно использовать scale, а если вы хотите просто увеличить отступы, то да нужно работать с padding'ами и margin'ами. А на счет пропорций я указал значения наугад, думаю пропорций вы сами уже бы подобрали бы.

[Mr_Smitt]

@black_wolf1894: Вы попутали, я не автор и я этого не писал. Далее по тексту идет "как будто блок просто плавно расширяет свои границы во все стороны одновременно" + @FFxSquall привел уже рабочий код только без анимации из всего этого следует вывод о том, что идет речь только о границах и масштаба текста тут не должно быть. Ваши ошибки по ответу были таковыми:
1. Невнимательно прочитали текст проблемы и посмотрели код.
2. Написали код не протестировав "А на счет пропорций я указал значения наугад"
3. Изменили css таким образом, что он перестал соответствовать изначальному виду каким его хотел видеть автор вопроса
P.S.
Это ни в коем случае не камень в ваш огород, просто хочу донести, что нужно учитывать эти факторы при написании ответа.

[Тимофей Белоусов]

@Mr_Smitt: Я просто хотел помочь. А то что написал не потому адресу извиняюсь, есть у меня хреновая черта "невнимательность". В верстке, одну задачу, можно решить разными вариантами и каждый из этих вариантов будет правилен по своему.
PS.
Когда отправил коммент, пытался его удалить, чтобы переписать на автора, но коммент не удалялся.
И да, Спасибо! Будем исправляться!!!