index.html

<style media="screen">
  .container div{
    width:25%;
    height:100px;
    float:left;
    transition: all .2s ease;
  }
</style>
<div class='container'>
  <div style='background:red;'></div>
  <div style='background:purple;'></div>
  <div style='background:blue;'></div>
  <div style='background:green;'></div>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>


<script type="text/javascript">
  var $all = $(".container div")
  $all.hover(function(){}, function(){
    $all.css('width', (100/ $all.length) + '%')
  })
  $(".container div").on("mousemove", function(e){
    var index = $all.index(e.target)
    var elementsLeft = $all.length - 2
    var othersWidth = (20/ elementsLeft) + "%"
    $all.css('width', othersWidth)
    if(index === 0){
      $all.eq(0).css('width','50%')
      $all.eq(1).css('width','30%')
      return
    }
    if(index === $all.length - 1){
      $all.eq(-1).css('width','50%')
      $all.eq(-2).css('width','30%')
      return
    }
    var elementsLeft = $all.length - 3
    var othersWidth = ((20 / elementsLeft)) + "%"
    $all.css('width', othersWidth)
    $all.eq(index).css('width','50%')
    $all.eq(index - 1).css('width','15%')
    $all.eq(index + 1).css('width','15%')
  })

</script>