Wie programmiert man eine Accordion Galerie? (HTML & CSS)

von | Jan 8, 2024 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML

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;
}

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert