Build a Grid-to-Full-Screen Image Animation With CSS (and a Touch of JavaScript)

In this tutorial, I'll show you a motion effect where a split-screen image grid layout will turn into a full-screen image.

Our CodePen Demo

Here’s what we’re going to create—click on the images to see the effect:

Please accept marketing cookies to load this content.

1. Begin With the HTML Markup

We’ll define three sections:

The first and third sections won’t have any real value, but we’ll utilize them to prove that the effect can work inside any page content.
The second important section will include four Unsplash images along with their captions.

Here’s the markup:

<section class="section-text">...</section>

<!--IMPORTANT SECTION-->
<section>
  <div class="grid">
    <div class="col col-1">
      <figure>
        <img src="castle1-unsplash.jpg" alt="Lake Bled, Bled, Slovenia">
        <figcaption>Lake Bled, Bled, Slovenia</figcaption>
      </figure>
    </div>
    <div class="col col-2">
      <figure>
        <img src="castle2-unsplash.jpg" alt="Schloss Neuschwanstein, Neuschwansteinstraße, Schwangau, Deutschland">
        <figcaption>Schloss Neuschwanstein, Schwangau, Deutschland</figcaption>
      </figure>
    </div>
    <div class="col col-3">
      <figure>
        <img src="castle3-unsplash.jpg" alt="Isola di Capo Passero, Italia">
        <figcaption>Isola di Capo Passero, Italia</figcaption>
      </figure>
    </div>
    <div class="col col-4">
      <figure>
        <img src="castle4-unsplash.jpg" alt="Eilean Donan Castle, Dornie, United Kingdom">
        <figcaption>Eilean Donan Castle, Dornie, United Kingdom</figcaption>
      </figure>
    </div>
  </div>
</section>

<section class="section-text">...</section>

2. Add the CSS

Let’s focus on the image grid styles—you can see all of them by clicking on the CSS tab of the demo project.

The image gallery will cover the entire screen.
Each column (grid item) will sit on top of the other. That said, by default, the last image will appear.

The page layout with the full-screen image

The clip-path property will help us create the two-by-two grid that initially appears. The idea is that each column will cover one-fourth of the viewport size.

The page layout with the grid of images

Optionally, we’ll use the ::before and ::after pseudo-elements of the .grid element to create some dividers between its columns.

All figure elements will be absolutely positioned and their position will depend on the top and left values.
We’ll use the object-fit: cover property value to place the images inside their parent. This way they will perfectly fit inside it without losing their aspect ratio. Plus, the object-position: top property value will move the image on top of the wrapper.
By default, all image captions won’t appear.

These are all the main styles:

.grid {
  position: relative;
  display: grid;
  height: 100vh;
}

.grid::before,
.grid::after {
  content: "";
  position: absolute;
  background: #333;
  z-index: 1;
}

.grid::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

.grid::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.grid .col {
  position: relative;
  grid-area: 1/1;
  cursor: pointer;
  transition: clip-path 0.5s;
}

.grid .col-1 {
  clip-path: inset(0 50% 50% 0);
}

.grid .col-2 {
  clip-path: inset(0 0 50% 50%);
}

.grid .col-3 {
  clip-path: inset(50% 50% 0 0);
}

.grid .col-4 {
  clip-path: inset(50% 0 0 50%);
}

.grid .col figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  margin: 0;
  transition: all 0.5s;
}

.grid .col-2 figure {
  left: 50%;
}

.grid .col-3 figure {
  top: 50%;
}

.grid .col-4 figure {
  top: 50%;
  left: 50%;
}

.grid .col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.grid .col figcaption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 5px;
  width: max-content;
  max-width: 95%;
  line-height: 1;
  color: white;
  background: #ff0054;
  text-align: center;
  opacity: 0;
  transition-property: opacity;
}

3. Apply the JavaScript

Each time we click on a column, we’ll toggle its animate-col class. At that point, the grid of images will morph into a full-screen image.

One important thing to note is that each time an image scales, it should sit on top of all the others. To implement this behavior, we’ll do something simple: we’ll utilize the transitionstart and transitionend events to apply a higher z-index to the target column when it scales in and restore its default stack order when it scales down. Any z-index higher than one will work, and place the full-screen image above the grid dividers.

Another notable thing is that the caption should smoothly appear after the completion of the full-screen image animation and disappear without animation when we click on the column. We follow this approach to prevent the awkward text wrapping on different lines on small screens. To understand it, make the caption always visible and run the animation from a small screen.

Here’s the required JavaScript code:

const cols = document.querySelectorAll(".grid .col");
const CLASS1 = "animate-col";
const CLASS2 = "animate-caption";

cols.forEach(function (col) {
  col.addEventListener("click", function () {
    this.classList.toggle(CLASS1);
    if (this.classList.contains(CLASS2)) {
      this.classList.remove(CLASS2);
    }
  });

  col.addEventListener("transitionstart", function () {
    this.style.zIndex = 2;
  });

  col.addEventListener("transitionend", function () {
    if (col.classList.contains(CLASS1)) {
      col.classList.add(CLASS2);
    } else {
      col.style.zIndex = "auto";
    }
  });
});

And the associated styles:

.grid .col {
  transition: clip-path 0.5s;
}

.grid .col figure {
  transition: all 0.5s;
}

.grid .col figcaption {
  transition-property: opacity;
}

.grid .col.animate-col {
  clip-path: inset(0);
}

.grid .col.animate-col figure {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid .col.animate-caption figcaption {
  opacity: 1;
  transition-duration: 0.3s;
}

Conclusion

In this short tutorial, we learned how to take advantage of the clip-path property and turn an image grid into a full-screen image. This gives us endless possibilities for creating appealing motion effects that behave like single-page applications delivering AJAX-driven content with just a little CSS and JavaScript!

Let’s look once more at our creation: