JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bubbleContainer">
    <div class="bubble"></div>
</div>

CSS

body {
    margin: 10px;
}
.bubbleContainer {
    width: 126px;
    height: 126px;
    border: 1px dashed #c0c0c0;
}
.bubble {
    width: 100px;
    height: 100px;
    border: 3px solid #000;
    border-radius: 100px;
    margin: 10px;
}

JavaScript

$(".bubble").on('scale', function(e, s) {
    var data = $.data(this, 'size'),
        w = data.width,
        h = data.height;
    $(this).stop().animate({
        width: w * s,
        height: h * s,
        marginLeft: data.marginLeft - w * (s-1) / 2,
        marginTop: data.marginTop - h * (s-1) / 2
    });
}).each(function() {
    var $this = $(this);
    $.data(this, 'size', {
        width: $this.width(),
        height: $this.height(),
        marginLeft: parseInt($this.css('margin-left')),
        marginTop: parseInt($this.css('margin-top'))
    });
}).hover(function() {
    $(this).trigger('scale', [1.1]);
}, function() {
    $(this).trigger('scale', [1.0])
});