How to make a border on top of neighboring elements?

Question

css

The task is the following: there is a colored block. When you hover over it, its border expands and should go on top of neighboring elements. My implementation . The bottom line is that on hover, the width of the border increases and the margin decreases proportionally.

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

But it has a flaw - when hovering, the entire block and the content in it tremble.
What alternative approach can be used to get rid of container jitter?
I also tried to make the same animation on js - the result was even worse.

Answer 1

Instead of border write outline
I am 99% sure that this will help you.

Answer 2

Even more like this jsfiddle.net/LLx3B/2

Answer 3

Here's how you can: jsfiddle.net/LLx3B

Answer 4

jsfiddle.net/iiil/x3Am6
here's an idea. And in your example it will definitely twitch. Don't even try to change it.

Answer 5

In the previous answer, because of the margin articles, I did not notice that the frame does not overlap adjacent elements.
This is how it should be jsfiddle.net/iiil/x3Am6/1