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

On this tutorial, I will present you a movement impact the place a split-screen picture grid format will flip right into a full-screen picture.

1. Start With the HTML Markup

We’ll outline three sections:

  • The primary and third sections gained’t have any actual worth, however we’ll make the most of them to show that the impact can work inside any web page content material.
  • The second essential part will embody 4 Unsplash photos together with their captions.

Right here’s the markup:

1
<part class="section-text">...</part>
2

3
<!--IMPORTANT SECTION-->
4
<part>
5
  <div class="grid">
6
    <div class="col col-1">
7
      <determine>
8
        <img src="castle1-unsplash.jpg" alt="Lake Bled, Bled, Slovenia">
9
        <figcaption>Lake Bled, Bled, Slovenia</figcaption>
10
      </determine>
11
    </div>
12
    <div class="col col-2">
13
      <determine>
14
        <img src="castle2-unsplash.jpg" alt="Schloss Neuschwanstein, Neuschwansteinstraße, Schwangau, Deutschland">
15
        <figcaption>Schloss Neuschwanstein, Schwangau, Deutschland</figcaption>
16
      </determine>
17
    </div>
18
    <div class="col col-3">
19
      <determine>
20
        <img src="castle3-unsplash.jpg" alt="Isola di Capo Passero, Italia">
21
        <figcaption>Isola di Capo Passero, Italia</figcaption>
22
      </determine>
23
    </div>
24
    <div class="col col-4">
25
      <determine>
26
        <img src="castle4-unsplash.jpg" alt="Eilean Donan Citadel, Dornie, United Kingdom">
27
        <figcaption>Eilean Donan Citadel, Dornie, United Kingdom</figcaption>
28
      </determine>
29
    </div>
30
  </div>
31
</part>
32

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

2. Add the CSS

Let’s deal with the picture grid types—you possibly can see all of them by clicking on the CSS tab of the demo project.

  • The picture gallery will cowl your complete display screen.
  • Every column (grid merchandise) will sit on high of the opposite. That mentioned, by default, the final picture will seem. 

The page layout with the full-screen imageThe page layout with the full-screen imageThe page layout with the full-screen image

  • The clip-path property will assist us create the two-by-two grid that originally seems. The thought is that every column will cowl one-fourth of the viewport measurement.  

The page layout with the grid of imagesThe page layout with the grid of imagesThe page layout with the grid of images

  • Optionally, we’ll use the ::earlier than and ::after pseudo-elements of the .grid ingredient to create some dividers between its columns.
The grid dividersThe grid dividersThe grid dividers

  • All determine components will likely be completely positioned and their place will rely on the high and left values.
  • We’ll use the object-fit: cowl property worth to position the photographs inside their dad or mum. This fashion they are going to completely match inside it with out dropping their facet ratio. Plus, the object-position: high property worth will transfer the picture on high of the wrapper. 
  • By default, all picture captions gained’t seem.

These are all the primary types:

1
.grid {
2
  place: relative;
3
  show: grid;
4
  peak: 100vh;
5
}
6

7
.grid::earlier than,
8
.grid::after {
9
  content material: "";
10
  place: absolute;
11
  background: #333;
12
  z-index: 1;
13
}
14

15
.grid::earlier than {
16
  high: 0;
17
  left: 50%;
18
  width: 1px;
19
  peak: 100%;
20
}
21

22
.grid::after {
23
  high: 50%;
24
  left: 0;
25
  width: 100%;
26
  peak: 1px;
27
}
28

29
.grid .col {
30
  place: relative;
31
  grid-area: 1/1;
32
  cursor: pointer;
33
  transition: clip-path 0.5s;
34
}
35

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

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

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

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

52
.grid .col determine {
53
  place: absolute;
54
  high: 0;
55
  left: 0;
56
  width: 50%;
57
  peak: 50%;
58
  margin: 0;
59
  transition: all 0.5s;
60
}
61

62
.grid .col-2 determine {
63
  left: 50%;
64
}
65

66
.grid .col-3 determine {
67
  high: 50%;
68
}
69

70
.grid .col-4 determine {
71
  high: 50%;
72
  left: 50%;
73
}
74

75
.grid .col img {
76
  width: 100%;
77
  peak: 100%;
78
  object-fit: cowl;
79
  object-position: high;
80
}
81

82
.grid .col figcaption {
83
  place: absolute;
84
  backside: 20px;
85
  left: 50%;
86
  remodel: translateX(-50%);
87
  padding: 6px 12px;
88
  border-radius: 5px;
89
  width: max-content;
90
  max-width: 95%;
91
  line-height: 1;
92
  coloration: white;
93
  background: #ff0054;
94
  text-align: middle;
95
  opacity: 0;
96
  transition-property: opacity;
97
}

3. Apply the JavaScript

Every time we click on on a column, we’ll toggle its animate-col class. At that time, the grid of photos will morph right into a full-screen picture.

One essential factor to notice is that every time a picture scales, it ought to sit on high of all of the others. To implement this conduct, we’ll do one thing easy: we’ll make the most of the transitionstart and transitionend occasions to use a better z-index to the goal column when it scales in and restore its default stack order when it scales down. Any z-index increased than one will work, and place the full-screen picture above the grid dividers.

One other notable factor is that the caption ought to easily seem after the completion of the full-screen picture animation and disappear with out animation once we click on on the column. We observe this strategy to forestall the awkward textual content wrapping on completely different traces on small screens. To grasp it, make the caption at all times seen and run the animation from a small display screen.

Right here’s the required JavaScript code:

1
const cols = doc.querySelectorAll(".grid .col");
2
const CLASS1 = "animate-col";
3
const CLASS2 = "animate-caption";
4

5
cols.forEach(perform (col) {
6
  col.addEventListener("click on", perform () {
7
    this.classList.toggle(CLASS1);
8
    if (this.classList.incorporates(CLASS2)) {
9
      this.classList.take away(CLASS2);
10
    }
11
  });
12

13
  col.addEventListener("transitionstart", perform () {
14
    this.type.zIndex = 2;
15
  });
16

17
  col.addEventListener("transitionend", perform () {
18
    if (col.classList.incorporates(CLASS1)) {
19
      col.classList.add(CLASS2);
20
    } else {
21
      col.type.zIndex = "auto";
22
    }
23
  });
24
});

And the related types:

1
.grid .col {
2
  transition: clip-path 0.5s;
3
}
4

5
.grid .col determine {
6
  transition: all 0.5s;
7
}
8

9
.grid .col figcaption {
10
  transition-property: opacity;
11
}
12

13
.grid .col.animate-col {
14
  clip-path: inset(0);
15
}
16

17
.grid .col.animate-col determine {
18
  high: 0;
19
  left: 0;
20
  width: 100%;
21
  peak: 100%;
22
}
23

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

Conclusion

On this quick tutorial, we discovered the right way to benefit from the clip-path property and switch a picture grid right into a full-screen picture. This offers us limitless potentialities for creating interesting movement results that behave like single-page functions delivering AJAX-driven content material with just a bit CSS and JavaScript!

Let’s look as soon as extra at our creation:

As at all times, thanks rather a lot for studying!

Extra Clip-path Tutorials on Tuts+

Grasp the CSS clip-path property with these tutorials:

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0