Dann ist doch alles richtig aus meiner Sicht. Unter "Quelldatei" lädst du das Bild hoch bzw. es öffnet sich ein Popup mit der Dateiverwaltung, wo du das gewünschte Bild auswählst.
Der Effekt mit dem Bild hat nicht direkt mit Contao zu tun, sondern mit CSS. Falls in deinem Fall nichts dagegen spricht, würde ich aber für jedes Wort ein eigenes Text-Element verwenden. Also nicht ein Element, wo alle 5 Wörter in einem TinyMCE stehen, sondern 5 Elemente, die jeweils ein Wort im TinyMCE haben. So lassen sich die Selektoren im CSS besser ansprechen. Ich würde noch auswählen, dass das Bild UNTER dem Text dargestellt wird.
Das HTML sollte dann in etwa so aussehen:
Code:
<div class="ce_text block">
<p>Ring</p>
<figure class="image_container">
<img src="files/ring.jpg" width="1920" height="1159" alt="">
</figure>
</div>
Den Hover-Effekt könnte man ganz vereinfacht dargestellt z.B. so realisieren:
Code:
.ce_text figure {
display: none;
}
.ce_text p:hover + figure {
display: block;
}
Lesezeichen