@import url('https://fonts.googleapis.com/css?family=Montserrat:300');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  background: #3e423acc;
}

.scaling-menu {
  width: 870px;
  height: 247px;
  margin: auto;
  display: flex;
}

.menu-item {
  width: 140px;
  height: 140px;
  margin-right: -35px;
  position: relative;
  transform: rotate(45deg);
  transition: all .3s;
  overflow: hidden;
  background: #A4CFBE;
}

.menu-item:nth-child(odd) {
  transform: translateY(105px) rotate(45deg);
}

.menu-item:hover {
  transform: scale(1.5) rotate(45deg) translate(23px, 26px);
}

.menu-item:hover + .menu-item {
  transform: translate(48px, -55px) rotate(45deg);
}

.menu-item:hover + .menu-item:nth-of-type(odd) {
  transform: translate(48px, 158px) rotate(45deg);
}

.menu-item.move:nth-of-type(odd) {
  transform: rotate(45deg) translate(75px, 150px);
}

.menu-item.move:nth-of-type(even) {
  transform: rotate(45deg) translate(-75px, 0px);
}

.menu-item .inner {
  width: 200px;
  height: 200px;
  top: -30px;
  left: -30px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  transform: rotate(-45deg);
}

.menu-item .inner:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, .3);
}

.inner > * {
  z-index: 10;
}

.city-description {
  width: 120px;
  height: 0;
  font-size: 9px;
  margin-top: 0;
  text-align: center;
  transform: translateY(120px);
  transition: transform .2s ease;
}

.menu-item:hover .city-description {
  height: auto;
  margin-top: 10px;
  transform: translateY(0);
}

.menu-item:nth-child(8n+2) .inner { background: url('https://source.unsplash.com/qD3FNMD7yCo/200x200'); }
.menu-item:nth-child(8n+1) .inner { background: url('https://source.unsplash.com/80UpjrtFxLA/200x200'); }
.menu-item:nth-child(8n+3) .inner { background: url('https://source.unsplash.com/ubSUwrr04Ks/200x200'); }
.menu-item:nth-child(8n+4) .inner { background: url('https://source.unsplash.com/yqWOgqmwP0M/200x200'); }
.menu-item:nth-child(8n+5) .inner { background: url('https://source.unsplash.com/uZt8wD1rgeo/200x200'); }
.menu-item:nth-child(8n+6) .inner { background: url('https://source.unsplash.com/K9lmfxcqlgs/200x200'); }
.menu-item:nth-child(8n+7) .inner { background: url('https://source.unsplash.com/ic6CAdKfDZQ/200x200'); }
.menu-item:nth-child(8n+8) .inner { background: url('https://source.unsplash.com/R5scocnOOdM/200x200'); }

@media screen and (max-width: 750px) {
  .scaling-menu {
    width: 560px;
  }

  .menu-item:nth-child(8n+6),
  .menu-item:nth-child(8n+7),
  .menu-item:nth-child(8n+8) { display: none; }
}