Heute möchte ich euch mal eine andere Art von Galerie zeigen und zwar nicht eine für 100e von Bilder sonder eine mit der man eine Handvoll Bilder schön anzeigen kann. Ich kann mir gut vorstellen, dass diese Accordion Galerie perfekt ist für die Hero Sektion einer Webseite. Eine Hero Sektion ist ja die oberste Sektion gleich unterm Menu.

Ein sehr schöner Effekt der eigentlich auch ganz einfach ist umzusetzen.

Video

HTML

Zuerst muss man natürlich mit HTML genau definieren wo wieviele Bilder angezeigt werden sollten.

1
2
3
4
5
6
7

<div class="galerie">
      <div class="bild1"></div>
      <div class="bild2"></div>
      <div class="bild3"></div>
      <div class="bild4"></div>
      <div class="bild5"></div>
</div>

CSS

Danach muss man jedem der Bilderbereiche ein Bild zuweisen und danach kann man den restlichen Effekt einbauen.

Wenn ihr einen eigenen Effekt einbauen wollen, könnt ihr diese Webseite besuchen. Unter cubic-bezier.com werden dann die cubic-bezier Codes generiert

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.bild1 {
  background-image: url(bild1.jpg);
}
.bild2 {
  background-image: url(bild2.jpg);
}
.bild3 {
  background-image: url(bild3.jpg);
}
.bild4 {
  background-image: url(bild4.jpg);
}
.bild5 {
  background-image: url(bild5.jpg);
}
 
.galerie {
  display: flex;
  height: 20rem;
  gap: 10px;
  padding: 50px;
}
 
.galerie > div {
  flex: 1;
  border-radius: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transition: all 600ms cubic-bezier(0.25, 0.4, 0.45, 1.4);
}
.galerie > div:hover {
  flex: 4;
}