moving bubbles

css

.actor, .actor-button {
    position: absolute;
    bottom: -100%;
    width: 100px;
    height: 100px;
    background: rgba(230, 230, 230, 1);
    border-radius: 50px;
    transition: .5s ease;
}

.actor-button {
    z-index: 2;
}

.actor-pulse {
    height: 100px;
    animation: pulse 1.5s infinite;
    border-radius: 50px;
}

.img-actor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    transition: .5s ease;
}


.actor-active > .clear-actor > .img-actor,
.actor:hover > .clear-actor > .title-actor,
.actor:hover > .clear-actor > .container-actor {
    visibility: visible;
    opacity: 1;
}

.actor:hover > .clear-actor > .img-actor {
    width: 200px;
    height: 200px;
}

.title-actor {
    display: flex;
    font-family: ClinicaPro;
    position: absolute;
    font-size: 1.5em;
    top: 55%;
    left: 50%;
    width: 300px;
    height: 304px;
    flex-direction: column-reverse;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

.container-actor {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 300px;
    height: 334px;
    border-radius: 20px;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(230, 230, 230, 1);
}

.clear-actor {
    overflow: hidden;
    position: absolute;
    bottom: -140px;
    background: transparent;
    top: 50px;
    left: 50px;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    transition: .5s ease;
}

.actor:hover > .clear-actor {
    width: 470px;
    height: 470px;
}

.actor:hover {
    z-index: 1;
}

.img-actor {
    visibility: hidden;
    opacity: 0;
}

html

<div class="actor">
            <div class="clear-actor">
                <div class="container-actor"></div>
                <img class="img-actor" src="actor.jpeg">
                <div class="title-actor">Actor</div>
            </div>
        </div>
        <div class="actor-button">
            <div class="actor-pulse"></div>
        </div>

js

$(".actor-button").hover(function () {
        $(".actor-pulse").remove();

        matrix = [];

        setTimeout(function () {
            var i = 0;
            $(".actor").each(function () {
                $(this).css("transition", ((5 + i + 1) > 10 ? ("1." + ((5 + i + 1) - 10)) : ("." + (5 + i + 1))) + "s ease");
                i++;
                var isValid;
                do {
                    isValid = 0;
                    var x = Math.random() * 1180 + 100;
                    var y = -(Math.random() * 670 + 100);

                    matrix[i - 1] = [];
                    matrix[i - 1][0] = x;
                    matrix[i - 1][1] = y;

                    if (matrix.length != 1) {
                        for (var a = 0; a < matrix.length - 1; a++) {
                            if (Math.abs(matrix[a][0] - x) > 80 &&
                                Math.abs(-matrix[a][1] - -y) > 80) {
                                    isValid++;
                            } else {
                                break;
                            }
                        }
                    }
                } while (isValid != i - 1);
            });
            var q = 0;
            $(".actor").each(function () {
                $(this).css("transform", "translateX(" + matrix[q][0] + "px) translateY(" + matrix[q++][1] + "px)");
            });
            setTimeout(function () {
                $(".actor").each(function () {
                    $(".actor").addClass("actor-active");
                });
            }, (i * 100) + 500);
        }, 500);
    });