<div class="main">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box box5"></div>
  <div class="box box6"></div>
</div>

.main {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 600px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid #000;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  transition: width 0.25s, height 0.2s;
}

var mainBox = $(".main"),
  box = $(".box"),
  boxLen = box.length;

mainBox
  .on("mousemove", function (e) {
    for (var i = 0; i < boxLen; i++) {
      var item = $(box[i]),
        d = getDistance(e, item),
        factor = 250;
      d = Math.min(d, factor);

      var num = ((factor - d) / factor + 1) * 50;
      item.css({
        width: num + "px",
        height: num + "px"
      });
    }
  })
  .on("mouseout", function (e) {
    if (e.target.className !== "main") return;
    for (var i = 0; i < boxLen; i++) {
      var item = $(box[i]);
      item.css({
        width: "50px",
        height: "50px"
      });
    }
  });

function getDistance(e, dom) {
  var e = e || window.event,
    x = Math.abs(e.clientX - dom.offset().left - dom.width() / 2),
    y = Math.abs(e.clientY - dom.offset().top - dom.height() / 2),
    c = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

  return c;
}