<box>
  <item>
    <div class="bg"></div>
    <div class="content">
      <h2>Apples</h2>
      <p>Loin, très loin, au delà des monts Mots, à mille lieues des pays Voyellie et Consonnia, demeurent les Bolos Bolos. Ils vivent en retrait, à Bourg-en-Lettres, sur les côtes de la Sémantique, un vaste océan de langues.</p>
    </div>
  </item>
  <item>
    <div class="bg"></div>
    <div class="content">
      <h2>Butter</h2>
      <p>Un petit ruisseau, du nom de Larousse, coule en leur lieu et les approvisionne en règlalades nécessaires en tout genre; un pays paradisiagmatique, dans lequel des pans entiers de phrases prémâchées vous volent litéralement tout cuit dans la bouche.</p>
    </div>
  </item>
  <item>
    <div class="bg"></div>
    <div class="content">
      <h2>Charlie</h2>
      <p>Un jour pourtant, une petite ligne de Bolo Bolo du nom de Lorem Ipsum décida de s'aventurer dans la vaste Grammaire. Le grand Oxymore voulut l'en dissuader, le prevenant que là-bas cela fourmillait de vils Virgulos, de sauvages Pointdexclamators et de sournois Semicolons qui l'attendraient pour sûr au prochain paragraphe, mais ces mots ne firent écho dans l'oreille du petit Bolo qui ne se laissa point déconcerter.</p>
    </div>
  </item>
  <item>
    <div class="bg"></div>
    <div class="content">
      <h2>Duff</h2>
      <p>En chemin, il rencontra un Copy. Le Copy prévint le petit Bolo que là d'où il venait, il avait déjà maintes et maintes fois été ressaisi, et que tout ce qui désormais restait de leurs origines était le mot "et", et que le petit Bolo ferait bien de se raviser, rebrousser chemin et retourner en son sain et sauf bercail.</p>
    </div>
  </item>
</box>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
  user-select: none;
  font: 100 16px 'Segoe UI', sans-serif;
  background: linear-gradient(45deg, rgba(0, 255, 255, 0.4), rgba(245, 245, 220, 1)), #fff;
}

box {
  --width: 150px;
  --gap: 0.75em;
  
  position: relative;
  width: calc(var(--width) * 2 + var(--gap) * 2);
  min-width: calc(var(--width) * 2 + var(--gap) * 2);
  border: 2px dashed #fff;
  display: flex;
  flex-wrap: wrap;
  padding: calc(var(--gap) / 2);
  border-radius: 0.5em;
  overflow: hidden;
}

item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--width);
  height: var(--width);
  margin: calc(var(--gap) / 2);
  border-radius: 0.5em;
  cursor: pointer;
  transition: 0.25s;
}

.bg {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
  width: 100%;
  height: 100%;
  background: var(--bg);
  transform-origin: var(--dir);
  transition: 0.25s;
}

.content {
  position: absolute;
  padding: var(--gap);
  left: var(--gap);
  top: var(--gap);
  width: calc(100% - var(--gap) * 4);
  height: calc(100% - var(--gap) * 4);
  transition: 0.25s;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  color: #fff;
  overflow: hidden;
}

.active {
  z-index: 2;
}

.active .content {
  opacity: 1;
  pointer-events: all;
}

.active .bg {
  transform: scale(2.08);
  filter: brightness(0.5);
}

item:nth-of-type(1) {
  --dir: left top;
  --bg: url('https://images.unsplash.com/photo-1544147170-f855d28c2be0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80') no-repeat center/cover;
}

item:nth-of-type(2) {
  --dir: right top;
  --bg: url('https://images.unsplash.com/photo-1468608366343-31d358f21159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80')  no-repeat center/cover;
}

item:nth-of-type(3) {
  --dir: left bottom;
  --bg: url('https://images.unsplash.com/photo-1523766775147-152d0d6e2adb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80') no-repeat center/cover;
}

item:nth-of-type(4) {
  --dir: right bottom;
  --bg: url('https://images.unsplash.com/photo-1479334053136-4dcabc560c9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80') no-repeat center/cover;
}

/*@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .content {
    -webkit-backdrop-filter: saturate(170%) brightness(120%) blur(10px);
    backdrop-filter: saturate(170%) brightness(120%) blur(10px);
  }
}*/

document.querySelectorAll('item').forEach(item => {
  item.addEventListener('click', function(){
    this.classList.toggle('active');
  });
})