I am looking to create a visual effect where one splat of paint merges with another splat of paint.
I currently have 4 columns, each with a different splat background. Is there a way to make these backgrounds interact with each other to create a random splat pattern?
This is the desired outcome: https://i.sstatic.net/VbMh0.jpg
This is what has been achieved so far:
section#splat {
background: #010318;
}
.tag-foto {
background: url(https://i.sstatic.net/bevwr.png);
height: 410px;
background-position-x: center;
background-position-y: center;
width: 290px;
}
.tag-foto-2 {
background: url(https://i.sstatic.net/yIwOh.png);
height: 410px;
background-position-x: center;
background-position-y: center;
width: 290px;
}
.tag-foto-3 {
background: url(https://i.sstatic.net/8ledX.png);
height: 410px;
background-position-x: center;
background-position-y: center;
width: 290px;
}
.tag-foto-4 {
background: url(https://i.sstatic.net/qwMFz.png);
height: 410px;
background-position-x: center;
background-position-y: center;
width: 290px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcfce7e0e7e1f2e3d3a7bda5bda2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<section id="splat">
<div class="container">
<div class="row">
Title
</div>
<div class="row">
<div class="col-md-3">
<div class="tag-foto">
</div>
<p class="region-artista text-center">Text</p>
</div>
<div class="col-md-3 ">
<div class="tag-foto-2">
</div>
<p class="region-artista text-center">text</p>
</div>
<div class="col-md-3">
<div class="tag-foto-3">
</div>
<p class="region-artista text-center">text</p>
</div>
<div class="col-md-3">
<div class="tag-foto-4">
</div>
<p class="region-artista text-center">text</p>
</div>
</div>
</div>
</section>