<div id="row">
  <div class="tile"></div>
  <div class="tile"></div>
  <div id="hover" class="tile">
    <div class="content">
      <div class="overlay">
        this is text
      </div>
    </div>
  </div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>
.tile {
  width: 80px;
  height: 80px;
  font-size: 16px;
  border: 1px solid blue;
  background-color: skyblue;
  box-sizing: border-box;
  transition: 1s transform;
  transform-origin: top center;
  float: left;
  margin-right: 10px;
  position: relative;
  backface-visibility: hidden;
}

#hover {
  background-color: teal;
}

.content {
  width: 200%;
  height: 200%;
  transform: scale(.5) translateZ(0px);
  transform-origin: top left;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: magenta;
  opacity: 0;
  touch-action: none;
  transition: opacity 1s;
}

#hover:hover {
  transform: scale(2);
}

#hover:hover .overlay {
  opacity: 1;
  touch-action: auto;
  transform: scale(1)
}

.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');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.