Увидел в сети массу пример и такую же массу примеров на ruSO и решил подобное реализовать но столкнулся с незнанием этой темы
Но по чуть чуть получилось сделать это :
body {
background: white;
background-image: url(https://i.imgur.com/d47ZIU3.jpg);
background-size: cover;
}
.blobs {
width:400px;
display:flex;
margin:30px auto;
align-items:center;
}
.blob{
width:100px;
height:100px;
background:#ccc;
border-radius:50%;
line-height:100px;
text-align:center;
}
.blobs:hover{
-webkit-filter: url("#goo");
filter: url("#goo");
transition:.5s;
}
.blob:hover{
background:tomato;
transition:.5s;
}
<div class="blobs">
<div class="blob">4</div>
<div class="blob">3</div>
<div class="blob">2</div>
<div class="blob">1</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
Сам вопрос в том: как сделать это слипание только двум рядом стоящим элементам ? Если наводим на 3 то слипаются 2 и 4 ... как это можно сделать ?