Akkordeons mit CSS

von tom | Jan. 2025 | Akkordeon, CSS

Akkordeons mittels CSS in verschiedenen Möglichkeiten zum nachbauen.

Es gibt viele Möglichkeiten Akkordeons oder Tabs in WordPress zu generieren. Klar gibt es dafür viele Plugins, aber wer möchte schon zu viele Plugins installieren.
Hier zeige ich ein paar Möglichkeiten anhand CSS und ein Plugin.

Accordion

Hier ist der CSS-Code in einem Code-Modul versteckt "Accordion"

Anleitung Accordion

Erstelle ein Text-Modul
Kopieren den Inhalt aus dem Tab: „Text-Modul“ ein.
Erstelle ein Code-Module und füge den Inhalt aus dem Tab: „Style-CSS Accordion“ ein.

Im Text-Modul kannst Du die Bilder ersetzen!

Text-Modul

<div class="accordion">
<ul>
<li>
<div>
Studio Lighting Lighting Light Modifiers Light Controls Backdrops <a href="#" class="sliderLink"></a>
</div></li>
<li>&nbsp;
Filmmaking Gear
LED Lighting
Scrim Jim Cine
Chroma-Key
<a href="#" class="sliderLink"></a></li>
<li>&nbsp;
Speedlight Modifiers
Apollo
LunaGrip
Rapid Box
<a href="#" class="sliderLink"></a></li>
<li>&nbsp;
Travel Photography
Rapid Box
Reflectors
Cases
<a href="#" class="sliderLink"></a></li>
<li>&nbsp;
Newborn Photography
Props
Backdrops
Lighting
<a href="#" class="sliderLink"></a></li>
<li>
<div>
Photo Enthusiast CFL Lighting Reflectors Backdrops
</div></li>
</ul>
</div>

<ul>

<li>

<div>

Studio Lighting Lighting Light Modifiers Light Controls Backdrops <a href="#" class="sliderLink"></a>

</div></li>

<li> 

Filmmaking Gear

LED Lighting

Scrim Jim Cine

Chroma-Key

<li> 

Speedlight Modifiers

Apollo

LunaGrip

Rapid Box

<li> 

Travel Photography

Rapid Box

Reflectors

Cases

<li> 

Newborn Photography

Props

Backdrops

Lighting

<li>

<div>

Photo Enthusiast CFL Lighting Reflectors Backdrops

</div></li>

</ul>

</div>

Style-CSS Akkordeon-1

&lt;style&gt;
body {
background-color: black;
}
.accordion {
width: 100%;
height: 550px;
overflow: hidden;
margin: 0px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 350px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease-in-out;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 350px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
text-shadow: 1px 1px 2px #000;
/*filter: invert(100%);*/
text-decoration: none;
transition: all 300ms ease-in-out;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.accordion ul li div a h2 {
text-overflow: clip;
margin-bottom: 2px;
top: 160px;
}
.accordion ul li div a p {
top: 160px;
padding-left: 1em;
}
.accordion ul li:nth-child(1) { 
background-image: url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&amp;w=1966&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); 
background-position: 50% 30%;
}
.accordion ul li:nth-child(2) { 
background-image: url("https://images.unsplash.com/photo-1553440569-bcc63803a83d?q=80&amp;w=2025&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); 
background-position: 70% 0%;
}
.accordion ul li:nth-child(3) { 
background-image: url("https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); 
background-position: 50% 50%;
}
.accordion ul li:nth-child(4) { 
background-image: url("https://images.unsplash.com/photo-1518987048-93e29699e79a?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); 
background-position: 30% 40%;
}
.accordion ul li:nth-child(5) { 
background-image: url("https://images.unsplash.com/photo-1502161254066-6c74afbf07aa?q=80&amp;w=2071&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); 
background-position: 60% 64%;
}
.accordion ul li:nth-child(6) { 
background-image: url("https://images.unsplash.com/photo-1611016186353-9af58c69a533?q=80&amp;w=2071&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); 
background-position: 70% 25%;
}
.accordion ul li { background-size: cover; }
.accordion ul:hover li { width: 10%; }
.accordion ul:hover li:hover { width: 90%; }
/*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media screen and (max-width: 680px) {
body { margin: 0; }
.accordion { height: auto; }
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
.accordion ul li div a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
&lt;/style&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<style>

body {

background-color: black;

}

.accordion {

width: 100%;

height: 550px;

overflow: hidden;

margin: 0px auto;

}

.accordion ul {

width: 100%;

display: table;

table-layout: fixed;

margin: 0;

padding: 0;

}

.accordion ul li {

display: table-cell;

vertical-align: bottom;

position: relative;

width: 16.666%;

height: 350px;

background-repeat: no-repeat;

background-position: center center;

transition: all 500ms ease-in-out;

}

.accordion ul li div {

display: block;

overflow: hidden;

width: 100%;

}

.accordion ul li div a {

display: block;

height: 350px;

width: 100%;

position: relative;

z-index: 3;

vertical-align: bottom;

padding: 15px 20px;

box-sizing: border-box;

text-shadow: 1px 1px 2px #000;

/*filter: invert(100%);*/

text-decoration: none;

transition: all 300ms ease-in-out;

}

.accordion ul li div a * {

opacity: 0;

margin: 0;

width: 100%;

text-overflow: ellipsis;

position: relative;

z-index: 5;

white-space: nowrap;

overflow: hidden;

-webkit-transform: translateX(-20px);

transform: translateX(-20px);

-webkit-transition: all 400ms ease-in-out;

transition: all 400ms ease-in-out;

}

.accordion ul li div a h2 {

text-overflow: clip;

margin-bottom: 2px;

top: 160px;

}

.accordion ul li div a p {

top: 160px;

padding-left: 1em;

}

.accordion ul li:nth-child(1) {

background-image: url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1966&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-position: 50% 30%;

}

.accordion ul li:nth-child(2) {

background-image: url("https://images.unsplash.com/photo-1553440569-bcc63803a83d?q=80&w=2025&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-position: 70% 0%;

}

.accordion ul li:nth-child(3) {

background-image: url("https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-position: 50% 50%;

}

.accordion ul li:nth-child(4) {

background-image: url("https://images.unsplash.com/photo-1518987048-93e29699e79a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-position: 30% 40%;

}

.accordion ul li:nth-child(5) {

background-image: url("https://images.unsplash.com/photo-1502161254066-6c74afbf07aa?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-position: 60% 64%;

}

.accordion ul li:nth-child(6) {

background-image: url("https://images.unsplash.com/photo-1611016186353-9af58c69a533?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

background-position: 70% 25%;

}

.accordion ul li { background-size: cover; }

.accordion ul:hover li { width: 10%; }

.accordion ul:hover li:hover { width: 90%; }

/*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/

.accordion ul:hover li:hover a * {

opacity: 1;

-webkit-transform: translateX(0);

transform: translateX(0);

}

@media screen and (max-width: 680px) {

body { margin: 0; }

.accordion { height: auto; }

.accordion ul li,

.accordion ul li:hover,

.accordion ul:hover li,

.accordion ul:hover li:hover {

position: relative;

display: table;

table-layout: fixed;

width: 100%;

-webkit-transition: none;

transition: none;

}

.accordion ul li div a * {

opacity: 1;

-webkit-transform: translateX(0);

transform: translateX(0);

}

</style>

Akkordeon-b

Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5

Hier liegt der Code: ul class="akkordeon-b"

Anleitung Akkordeon-b

Erstelle ein Code-Modul
Kopieren den Inhalt aus dem Tab: „Code-Modul“ ein.
Erstelle ein Code-Module und füge den Inhalt aus dem Tab: „Style-CSS Akkordeon-1“ ein.

Im Text-Modul kannst Du die Bilder ersetzen!

Code-Modul: acordeon-b

<ul class=“akkordeon-b“> <li> <h4>Überschrift 1</h4> <a href=“#“> <img src=“https://1.bp.blogspot.com/-na8syCqA5QM/U2Y0MkeZeFI/AAAAAAAAPyA/5C7WeCVpcyE/s900/yecla.jpg“ /> </a></li> <li> <h4>Überschrift 2</h4> <a href=“#“> <img src=“https://3.bp.blogspot.com/-0VLtdXRmROw/U2Y0MBkDjKI/AAAAAAAAPx8/2WHDkLKpo3g/s900/ricote.jpg“ /> </a></li> <li> <h4>Überschrift 3</h4> <a href=“#“> <img src=“https://4.bp.blogspot.com/-dx4GDtQCuCY/U2Y0LT8IlRI/AAAAAAAAPxo/4XW_d21QrMk/s900/bullas.jpg“ /> </a></li> <li> <h4>Überschrift 4</h4> <a href=“#“> <img src=“https://4.bp.blogspot.com/-8vVOgYUvpRA/U2Y0LTWXwFI/AAAAAAAAPxs/HPnmp59MYtk/s900/jumilla.jpg“ /> </a></li> <li> <h4>Überschrift 5</h4> <a href=“#“> <img src=“https://4.bp.blogspot.com/-yyHs3e39Tsg/U2Y0LHHoRmI/AAAAAAAAPxk/TnqknfWjR0s/s900/abanilla.jpg“ /> </a></li> </ul>

Style-CSS: acordeon-b

/*Code: ul class="akkordeon-b"*/<br />&lt;style&gt;<br />/* Allgemeine Einstellungen */</p>
<p>ul.akkordeon-b * {<br />-webkit-transition: all .6s ease-in-out;<br />-moz-transition: all .6s ease-in-out;<br />transition: all .6s ease-in-out;<br />}<br />/* Allgemeiner Container */<br />ul.akkordeon-b {<br />width: 100%; /* Gesamtbreite anpassen */<br />overflow: hidden;<br />padding: 0;<br />background: #000;<br />text-align: center;<br />list-style: none;<br />font-size: 0;<br />box-shadow: 0 0 10px #333;<br />}<br />/* Jedes Element */<br />ul.akkordeon-b li {<br />position: relative;<br />display: inline-block;<br />*display: inline; zoom: 1; /* IE7 */<br />width: 10%;<br />height:0;<br />padding-bottom: 40%; /* Bild-Seitenverhältnis = (height*X)/width */<br />background: #eee;<br />text-align: center;<br />box-shadow: -2px 0px 8px #999;<br />}<br />/* Registerkartentitel */<br />ul.akkordeon-b li h4 {<br />position: relative;<br />top: 5%;<br />z-index: 1;<br />margin: 0;<br />font-size: 18px;<br />text-align: center;<br />text-transform: uppercase;<br />-webkit-transform: rotate(90deg);<br />-moz-transform: rotate(90deg);<br />transform: rotate(90deg);<br />-webkit-transform-origin: 10% 120%;<br />-moz-transform-origin: 10% 120%;<br />transform-origin: 10% 120%;<br />white-space: nowrap;<br />}<br />/* Inhalt zunächst ausgeblendet */<br />ul.akkordeon-b li a, ul.akkordeon-b li img {<br />position: absolute;<br />bottom: 0;<br />right: 0;<br />display: inline-block;<br />*display: inline; zoom: 1; /* IE7 */<br />width: 0;<br />padding:0;<br />background: #333;<br />}<br />/* Hover: Wir erweitern das Element, indem wir seine Breite vergrößern */<br />ul.akkordeon-b li:hover {<br />width: 60%; /* 100 – 10*(nºelem-1) // X=60 für Bildverhältnis */<br />background: #333;<br />}<br />/* Hover: Wir bringen den Titel in die Horizontale und legen einen Hintergrund darauf */<br />ul.akkordeon-b li:hover h4 {<br />padding-left: 10px;<br />padding-top:10px;<br />background: #9ef84f;<br />color: #000;<br />-webkit-transform: none;<br />-moz-transform: none;<br />transform: none;<br />}<br />/* Hover: Inhalt erweitern */<br />ul.akkordeon-b li:hover a, ul.akkordeon-b li:hover a img {<br />width: 100%;<br />}<br />/* Einstellungen für kleine Auflösungen */<br />@media(max-width:600px) {<br />ul.akkordeon-b li h4 {<br />font-size: 12px;<br />letter-spacing: 1px;<br />}<br />}</p>
<p>/*VARIATIONEN, UM DAS MENÜ ZUERST ÜBER DIE GANZE BREITE ZU BELAUFEN<br />ul.akkordeon-b li {<br />width: 20%;<br />}<br />ul.akkordeon-b:hover li {<br />width: 10%;<br />}<br />ul.akkordeon-b li:hover {<br />width: 60%;<br />}<br />*/</p>
<p>&lt;/style&gt;

/*Code: ul class="akkordeon-b"*/<br /><style><br />/* Allgemeine Einstellungen */</p>

<p>ul.akkordeon-b * {<br />-webkit-transition: all .6s ease-in-out;<br />-moz-transition: all .6s ease-in-out;<br />transition: all .6s ease-in-out;<br />}<br />/* Allgemeiner Container */<br />ul.akkordeon-b {<br />width: 100%; /* Gesamtbreite anpassen */<br />overflow: hidden;<br />padding: 0;<br />background: #000;<br />text-align: center;<br />list-style: none;<br />font-size: 0;<br />box-shadow: 0 0 10px #333;<br />}<br />/* Jedes Element */<br />ul.akkordeon-b li {<br />position: relative;<br />display: inline-block;<br />*display: inline; zoom: 1; /* IE7 */<br />width: 10%;<br />height:0;<br />padding-bottom: 40%; /* Bild-Seitenverhältnis = (height*X)/width */<br />background: #eee;<br />text-align: center;<br />box-shadow: -2px 0px 8px #999;<br />}<br />/* Registerkartentitel */<br />ul.akkordeon-b li h4 {<br />position: relative;<br />top: 5%;<br />z-index: 1;<br />margin: 0;<br />font-size: 18px;<br />text-align: center;<br />text-transform: uppercase;<br />-webkit-transform: rotate(90deg);<br />-moz-transform: rotate(90deg);<br />transform: rotate(90deg);<br />-webkit-transform-origin: 10% 120%;<br />-moz-transform-origin: 10% 120%;<br />transform-origin: 10% 120%;<br />white-space: nowrap;<br />}<br />/* Inhalt zunächst ausgeblendet */<br />ul.akkordeon-b li a, ul.akkordeon-b li img {<br />position: absolute;<br />bottom: 0;<br />right: 0;<br />display: inline-block;<br />*display: inline; zoom: 1; /* IE7 */<br />width: 0;<br />padding:0;<br />background: #333;<br />}<br />/* Hover: Wir erweitern das Element, indem wir seine Breite vergrößern */<br />ul.akkordeon-b li:hover {<br />width: 60%; /* 100 – 10*(nºelem-1) // X=60 für Bildverhältnis */<br />background: #333;<br />}<br />/* Hover: Wir bringen den Titel in die Horizontale und legen einen Hintergrund darauf */<br />ul.akkordeon-b li:hover h4 {<br />padding-left: 10px;<br />padding-top:10px;<br />background: #9ef84f;<br />color: #000;<br />-webkit-transform: none;<br />-moz-transform: none;<br />transform: none;<br />}<br />/* Hover: Inhalt erweitern */<br />ul.akkordeon-b li:hover a, ul.akkordeon-b li:hover a img {<br />width: 100%;<br />}<br />/* Einstellungen für kleine Auflösungen */<br />@media(max-width:600px) {<br />ul.akkordeon-b li h4 {<br />font-size: 12px;<br />letter-spacing: 1px;<br />}<br />}</p>

<p>/*VARIATIONEN, UM DAS MENÜ ZUERST ÜBER DIE GANZE BREITE ZU BELAUFEN<br />ul.akkordeon-b li {<br />width: 20%;<br />}<br />ul.akkordeon-b:hover li {<br />width: 10%;<br />}<br />ul.akkordeon-b li:hover {<br />width: 60%;<br />}<br />*/</p>

Alternative styles

Alternative styles / CSS: b-accordion

First section
Second
Section #3
Fourth section
Fifth
Section #6
Seventh section
Eighth

Hier das Code-Modul:"b-accordion"

Anleitung „b-accoedion“

Erstelle ein Code-Modul
Kopieren den Inhalt aus dem Tab: „Code-Modul“ ein.
Erstelle ein weiteres Code-Module und füge den Inhalt aus dem Tab: „Style-CSS“ ein.

Im Text-Modul kannst Du die Bilder ersetzen!

Code-Module: b-accordion

<h2>Alternative styles / CSS: b-accordion</h2>

<ul class=“b-accordion b-accordion_alt“>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>First section</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Second</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Section #3</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Fourth section</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Fifth</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Section #6</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Seventh section</h3>
</li>
<li class=“b-accordion__cell b-accordion_alt__cell“>
<div class=“b-accordion__content b-accordion_alt__content“></div>
<h3 class=“b-accordion__content__title b-accordion_alt__content__title“>Eighth</h3>
</li>
</ul>

Style-CSS: b-accoedion

&lt;style&gt;
body {
padding: 0 px;
}
.b-accordion {
display: flex;
width: 100%;
height: 500px;
padding: 0;
margin: 0;
flex-wrap: row nowrap;
/*
* Alternative styles
*/
}
.b-accordion__cell {
padding: 16px;
overflow: hidden;
transition: flex 0.3s;
flex: 1 10;
}
.b-accordion__cell:hover {
flex: 10;
}
.b-accordion__cell:nth-child(1) {
background: #ef9a9a;
}
.b-accordion__cell:nth-child(2) {
background: #ce93d8;
}
.b-accordion__cell:nth-child(3) {
background: #90caf9;
}
.b-accordion__cell:nth-child(4) {
background: #a5d6a7;
}
.b-accordion__cell:nth-child(5) {
background: #ffe082;
}
.b-accordion__content {
position: relative;
display: block;
width: 400px;
}
.b-accordion__content__title {
position: absolute;
top: 230px;
left: 0;
display: block;
width: 300px;
transform: rotate(-90deg);
transform-origin: 0 0 0;
}
.b-accordion__content__text {
padding-left: 40px;
margin: 0;
}
.b-accordion_alt__content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
filter: blur(10px) grayscale(70%);
-webkit-filter: blur(10px) grayscale(70%);
transition: all 0.5s;
}
.b-accordion_alt__content__title {
top: 480px;
padding: 16px;
color: #FFF;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.b-accordion_alt__cell {
position: relative;
padding: 0;
background-color: #000 !important;
}
.b-accordion_alt__cell:hover .b-accordion_alt__content {
filter: blur(0) grayscale(0);
-webkit-filter: blur(0) grayscale(0);
}
.b-accordion_alt__cell:nth-child(1) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&amp;w=1966&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(2) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1553440569-bcc63803a83d?q=80&amp;w=2025&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(3) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(4) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1518987048-93e29699e79a?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(5) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1502161254066-6c74afbf07aa?q=80&amp;w=2071&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(6) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1611016186353-9af58c69a533?q=80&amp;w=2071&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(7) .b-accordion_alt__content {
background: url(https://images.unsplash.com/photo-1600274718797-c43891421665?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;
background-size: cover;
}
.b-accordion_alt__cell:nth-child(8) .b-accordion_alt__content {
background: url(https://medienmonkey.de/wp-content/uploads/2023/11/animated-MM-1.gif) 0 50% no-repeat;
background-size: cover;
}
&lt;/style&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<style>

body {

padding: 0 px;

}

.b-accordion {

display: flex;

width: 100%;

height: 500px;

padding: 0;

margin: 0;

flex-wrap: row nowrap;

* Alternative styles

}

.b-accordion__cell {

padding: 16px;

overflow: hidden;

transition: flex 0.3s;

flex: 1 10;

}

.b-accordion__cell:hover {

flex: 10;

}

.b-accordion__cell:nth-child(1) {

background: #ef9a9a;

}

.b-accordion__cell:nth-child(2) {

background: #ce93d8;

}

.b-accordion__cell:nth-child(3) {

background: #90caf9;

}

.b-accordion__cell:nth-child(4) {

background: #a5d6a7;

}

.b-accordion__cell:nth-child(5) {

background: #ffe082;

}

.b-accordion__content {

position: relative;

display: block;

width: 400px;

}

.b-accordion__content__title {

position: absolute;

top: 230px;

left: 0;

display: block;

width: 300px;

transform: rotate(-90deg);

transform-origin: 0 0 0;

}

.b-accordion__content__text {

padding-left: 40px;

margin: 0;

}

.b-accordion_alt__content {

position: absolute;

top: 0;

width: 100%;

height: 100%;

filter: blur(10px) grayscale(70%);

-webkit-filter: blur(10px) grayscale(70%);

transition: all 0.5s;

}

.b-accordion_alt__content__title {

top: 480px;

padding: 16px;

color: #FFF;

background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));

}

.b-accordion_alt__cell {

position: relative;

padding: 0;

background-color: #000 !important;

}

.b-accordion_alt__cell:hover .b-accordion_alt__content {

filter: blur(0) grayscale(0);

-webkit-filter: blur(0) grayscale(0);

}

.b-accordion_alt__cell:nth-child(1) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1966&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(2) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1553440569-bcc63803a83d?q=80&w=2025&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(3) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(4) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1518987048-93e29699e79a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(5) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1502161254066-6c74afbf07aa?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(6) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1611016186353-9af58c69a533?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(7) .b-accordion_alt__content {

background: url(https://images.unsplash.com/photo-1600274718797-c43891421665?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) 0 50% no-repeat;

background-size: cover;

}

.b-accordion_alt__cell:nth-child(8) .b-accordion_alt__content {

background: url(https://medienmonkey.de/wp-content/uploads/2023/11/animated-MM-1.gif) 0 50% no-repeat;

background-size: cover;

}

</style>

← Google Fonts in Divi Hochladen Switch mit Funktion →