Bild Text Darstellung

Hallo Friends2019,

Ähnliches könntest Du mit dem Widget „Tabs / Akkordeon“ („Darstellung: Akkordeon ...“) erreichen.

Im Feld für den Titel/die Überschrift kannst Du kein Bild direkt auswählen, Du müsstest hier also stattdessen mit etwas HTML arbeiten.

Der Code könnte so aussehen:

<img src="oid://image/f22e44cb-027d-4882-ae01-5c34cf72e70e">

Die Objekt-ID („oid“) müsstest Du für Deine Bilder natürlich zunächst ermitteln und in den obigen Code statt des Beispiels „oid://image/f22e44cb-027d-4882-ae01-5c34cf72e70e“ einfügen.

Siehe hierzu https://docs.zeta-producer.com/objekt-ids-verwenden.html

Was meiner Meinung nach, im Gegensatz zu Deinem Beispiel nicht geht bzw. nur sehr schwer zu erreichen wäre, wäre, dass sich der aufgeklappte Text über die gesamte Seitenbreite erstreckt.

Vielleicht haben hierzu aber die echten HTML- bzw. CSS-Nerds in diesem Forum noch gute Vorschläge.

Hier noch ein paar Screenshots zur Verdeutlichung:

Viele Grüße

Tom

Versuche es mal mit diesem Code

CSS
<style>
.accordion-container {
display: flex; flex-wrap: wrap;/* Erlaubt das Umbrechen in die nächste Zeile */
max-width: 1200px; margin: 0 auto; gap: 10px;
}
    
.accordion-item {
/* Jedes Bild nimmt ca. 24% ein (bei 4 Bildern) */
flex: 1 1 calc(25% - 10px); min-width: 150px; cursor: pointer; position: relative;
}
    
.accordion-item img {
width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 8px;
}
    
.accordion-item span {
position: absolute; bottom: 15px; width: 100%; text-align: center; color: white; font-weight: bold; background: rgba(0, 0, 0, 0.3);
}
/* DER TEXT-BEREICH */
    
.accordion-content {
display: none;/* Standardmäßig unsichtbar */
width: 100%;/* Volle Breite erzwingen */
order: 10;/* Sorgt dafür, dass der Text IMMER unter den Bildern steht */
background: #f9f9f9; padding: 20px; margin-top: 15px; border-radius: 8px; border: 1px solid #ddd;
}
/* Diese Klasse wird per JS hinzugefügt */
    
.accordion-content.active {
display: block;
}

</style>

HTML (Beispielfotos)

<div class="accordion-container">
<div class="accordion-item" onclick="showText(1)">
<img src="https://picsum.photos/id/10/400/300" alt="Text Bild 1">
<span>Text Bild 1</span>
</div>

<div class="accordion-item" onclick="showText(2)">
<img src="https://picsum.photos/id/20/400/300" alt="Text Bild 2">
<span>Text Bild 2</span>
</div>

<div class="accordion-item" onclick="showText(3)">
<img src="https://picsum.photos/id/30/400/300" alt="Text Bild 3">
<span>Text Bild 3</span>
</div>

<div class="accordion-item" onclick="showText(4)">
<img src="https://picsum.photos/id/40/400/300" alt="Text Bild 4">
<span>Text Bild 4</span>
</div>

<div id="text-1" class="accordion-content">

<h3>BILD 1</h3>

<p>Hier steht der Text zu Bild 1.....................</p>
</div>..
<div id="text-2" class="accordion-content">

<h3>BILD 2</h3>

<p>Hier steht der Text zu Bild 2.....................</p>
</div>
<div id="text-3" class="accordion-content">

<h3>BILD 3</h3>

<p>Hier steht der Text zu Bild 3....................</p>
</div>
<div id="text-4" class="accordion-content">

<h3>BILD 4</h3>

<p>Hier steht der Text zu Bild 4....................</p>

</div>
</div>

<script>
function showText(id)
{
// 1. Alle Texte finden und verstecken
const allTexts = document.querySelectorAll('.accordion-content');
allTexts.forEach(t => t.classList.remove('active'));

// 2. Den richtigen Text anzeigen
const selectedText = document.getElementById('text-' + id);
selectedText.classList.add('active');
}

</script>

Beste Grüße
Armin