Css grid simple animation

by Julien Roche

HTML

<div class="grid">
  <div class="grid__cell grid__cell--caption1"></div>
  <div class="grid__cell grid__cell--caption2"></div>
  <div class="grid__cell grid__cell--caption3"></div>

  <div class="grid__cell grid__cell--caption4"></div>
  <div class="grid__cell grid__cell--caption5"></div>
  <div class="grid__cell grid__cell--caption6"></div>
</div>

CSS

html,
body {
  border: none;
  height: 100vh;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100vw;
}

.grid {
  display: grid;
  height: 100vh;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid__cell {
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  grid-column: span 1;
}

.grid__cell:hover {
  grid-column: span 2;
  grid-row: span 2;
}

.grid__cell:nth-child(n + 3):hover {
    grid-row: 1 / span 2;
}

.grid__cell:nth-child(3n):hover {
  grid-column: 2 / span 2;
}

.grid__cell--caption1 {
  background-image: url("https://images.pexels.com/photos/911758/pexels-photo-911758.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}

.grid__cell--caption2 {
  background-image: url("https://images.pexels.com/photos/694629/pexels-photo-694629.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}

.grid__cell--caption3 {
  background-image: url("https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}

.grid__cell--caption4 {
  background-image: url("https://images.pexels.com/photos/731082/pexels-photo-731082.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}

.grid__cell--caption5 {
  background-image: url("https://images.pexels.com/photos/57690/pexels-photo-57690.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}

.grid__cell--caption6 {
  background-image: url("https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
}