<div id="row">
  <div class="tile"></div>
  <div class="tile"></div>
  <div id="hover" class="tile">Hover Me</div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

.tile {
  width: 80px;
  height: 80px;
  border: 1px solid blue;
  background-color: skyblue;
  padding: 5px;
  box-sizing: border-box;
  transition: 1s transform;
  transform-origin: top center;
  float: left;
  margin-right: 10px;
}

.shiftLeft { 
  transform: translate3d(-40px, 0, 0);
}

.shiftRight { 
  transform: translate3d(40px, 0, 0);
}

var row = document.getElementById('row');

var tiles = document.getElementsByClassName('tile');
var hoverTile = document.getElementById('hover');

hoverTile.addEventListener('mouseover', function() {
  for (var i = 0; i < 2; i++) {
    var tile = tiles[i];
    tile.classList.add('shiftLeft');
  }
  
  for (var i = 3; i < tiles.length; i++) {
    var tile = tiles[i];
    tile.classList.add('shiftRight');
  }
});

hoverTile.addEventListener('mouseout', function() {
  for (var i = 0; i < 2; i++) {
    var tile = tiles[i];
    tile.classList.remove('shiftLeft');
  }
  
  for (var i = 3; i < tiles.length; i++) {
    var tile = tiles[i];
    tile.classList.remove('shiftRight');
  }
});