Создаю примерно такую анимацию при наведении -
https://jsfiddle.net/tema1302/f1dzea8b/41/
Суть в том, что при наведении на границу появляющихся элементов эффект hover делает так, что элементы начинают болтаться, как невменяемые.
Сначала я сделал всё через transform: translate..., но начала появлятся такая ситуация и я нагуглил, что проблема как раз в transform (много разных объяснений), поэтому я переделал на позиционирование через top, left.
Стало чуть лучше, но проблема не ушла. Подскажите, пожалуйста, как пофиксить и в чем проблема?
P.S. Делал даже через JS, чтобы абсолютные элементы были не дочерними блоками, а находились выше по древу, ведь все дети блока с классом .block принимают на себя состояние hover. Но не помогло, поведение было таким же трясущимся.
P.P.S. Если вдруг ссылка не отображается, о чем свидетельствуют комментарии ниже, прилагаю код еще и сюда:
<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;
}
Простой
Средний
