Как сделать бордер поверх соседних элементов?

Question

[Alex]

Задача стоит следующая: есть цветной блок. При наведении на него его border расширяется и должен идти поверх соседних элементов. Моя реализация. Суть в том, что при наведении ширина border'а увеличивается и margin пропорционально уменьшается.

.col-bor {
	background-clip: content-box;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	border-width: 0px;
	border-style: solid;
	transition-property: border-width, margin;
	transition-duration: .3s;
	-webkit-transition-property: border-width, margin;
	-webkit-transition-duration: .3s;
}
.col-bor:hover {
	border-width: 10px;
	margin: -10px;
	z-index: 5;
}

Но в ней есть изъян - при наведении весь блок и контент в нём дрожит.

Какой альтернативный подход можно использовать, чтобы избавится от дрожи контейнера?
Пробовал так же сделать эту же анимацию на js - результат оказался ещё хуже.

Answer 1

[Евгений Низамиев]

Вместо border пропишите outline

Уверен на 99% что это вам поможет.

Answer 2

[Kuzzy]

Даже скорее вот так jsfiddle.net/LLx3B/2

Answer 3

[Kuzzy]

Вот так можно: jsfiddle.net/LLx3B

Answer 4

[Юрий Лобанов]

jsfiddle.net/iiil/x3Am6
вот такая идея. А в Вашем примере однозначно будет дергаться. Даже не пытайтесь его изменить.

Answer 5

[Юрий Лобанов]

В предыдущем ответе из-за margin артиклей не заметил, что рамка не перекрывает соседние элементы.
Вот так надо jsfiddle.net/iiil/x3Am6/1