Why are absolutely given elements fumbling on hover with transition?

Question

css

I create something like this animation on hover -
https://jsfiddle.net/tema1302/f1dzea8b/41/

The bottom line is that when hovering over the border of the appearing elements, the hover effect makes the elements begin to dangle like crazy.

At first I did everything through transform: translate..., but this situation began to appear and I googled that the problem is just in transform (many different explanations), so I changed it to positioning through top, left.

It got a little better, but the problem didn't go away. Tell me, please, how to fix and what is the problem?

PS I even did it through JS so that absolute elements were not child blocks, but were higher in the tree, because all children of a block with the .block class take on the hover state. But it didn't help, the behavior was just as shaky.

PPS If suddenly the link is not displayed, as evidenced by the comments below, I also attach the code here:

<div class="wrapper">
  <div class="block">
    <div class="el-1 el-hover"></div>
    <div class="el-2 el-hover"></div>
    <div class="block__el">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil molestias laborum in dignissimos laboriosam voluptatem mollitia eligendi dolore commodi cupiditate, vitae provident illum amet quidem doloremque quas nobis nulla ullam.
      <div class="el-3 el-hover"></div>
      <div class="el-4 el-hover"></div>
    </div>
  </div>
  <div class="block">
    <div class="el-1 el-hover"></div>
    <div class="el-2 el-hover"></div>
    <div class="block__el">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil molestias laborum in dignissimos laboriosam voluptatem mollitia eligendi dolore commodi cupiditate, vitae provident illum amet quidem doloremque quas nobis nulla ullam.
      <div class="el-3 el-hover"></div>
      <div class="el-4 el-hover"></div>
    </div>
  </div>
  <div class="block">
    <div class="el-1 el-hover"></div>
    <div class="el-2 el-hover"></div>
    <div class="block__el">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil molestias laborum in dignissimos laboriosam voluptatem mollitia eligendi dolore commodi cupiditate, vitae provident illum amet quidem doloremque quas nobis nulla ullam.
      <div class="el-3 el-hover"></div>
      <div class="el-4 el-hover"></div>
    </div>
  </div>
</div>

.wrapper {
   padding: 20px;
   background: green;
   display: flex;
   justify-content: space-around;
}
 .block {
   z-index: 2;
   width: 200px;
   height: auto;
   transition: all 0.5s ease;
   display: inline-block;
   margin-right: 10px;
   position: relative;
}
 .block__el {
   transition: all 0.5s ease;
   background: #fff;
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   padding: 10px 20px;
}
 .block .el-hover {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: all 0.5s ease;
   opacity: 0;
   display: block;
   background: yellow;
   width: 50px;
   height: 50px;
}
 .block .el-hover.el-1 {
   z-index: -1;
}
 .block .el-hover.el-2 {
   z-index: -1;
}
 .block .el-hover.el-3 {
   z-index: -1;
}
 .block .el-hover.el-4 {
   z-index: -1;
}
 .block:hover {
   transform: scale(1.05);
}
 .block:hover .el-hover {
   opacity: 1;
}
 .block:hover .el-hover.el-1 {
   top: 10%;
   left: -2%;
}
 .block:hover .el-hover.el-2 {
   top: 90%;
   left: 100%;
}
 .block:hover .el-hover.el-3 {
   top: 10%;
   left: 90%;
   z-index: 0;
}
 .block:hover .el-hover.el-4 {
   top: 90%;
   left: 6%;
   z-index: 0;
}

Answer 1

I'll play extrasex, which covid didn't guess.
I assume that at the moment when the element falls under the mouse - it is given positioning and offset in the hover, and absolute. As a result, he disappears from the zone of influence of the cursor and bam - the hover state is canceled, because. outside the cursor.. Gave, gave, left - returned. And again pancake under the cursor. What is working at this moment? Hover of course. Processors are now powerful, speeds are high - that's flickering.
But, if the code is still available for analysis, you can play an expert, not Wang.