Trick # 350 | Dieser Beitrag beinhaltet 621 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Verlinkte Bilder können im Divi-Theme mit einem Overlay angezeigt werden. Das klappt bestens etwa im Bildmodul oder auch im Blogmodul. Dabei wird dann jeweils das Bild mit einer transparenten Farbe belegt und in der Mitte ein Icon agezeigt, welches zum Klick animieren soll. Wahlweise kann dieses Icon auch mit einem Text ersetzt werden – wir zeigen Ihnen, wie das geht.
Der kleine Trick funktioniert sowohl mit dem Bild- wie mit dem Blog-Modul des Divi-Themes.
- Fügen Sie also an geeigneter Stelle wahlweise das eine oder andere auf Ihrer Website ein. Falls Sie ein Bildmodul verwenden, müssen Sie dieses mit einer verlinkten URL versehen, damit die Overlay-Option überhaupt funktionieren kann.
- Nun fügen Sie dem neu erstellten Modul eine CSS-Klasse namens «image-hover-text» hinzu. Klicken Sie hiezu in den Moduleinstellungen auf den Tab «Erweitert», dann auf «CSS-ID und Klassen» und fügen den Klassennamen im Textfeld «CSS-Klasse» ein.
- Nun wechseln Sie in den Tab «Design». Aktivieren Sie die Option «Image Overlay».
Sie können nun die Farben wählen: Die Iconfarbe wird dabei jene sein, die dereinst für den eingeblendeten Text verwendet wird. Bei der zweiten Farbwahl geht es um den Hintergrund der Texteinblendung. Wählen Sie dort eine Farbe die zur Iconfarbe kontrastiert und stellen Sie sie bis zum gewünschten Grad auf transprent ein, admit das darunterliegende Bild noch durchschimmert.
Schliesslich müssen Sie aus der Iconauswahl noch ein beliebiges Icon auswählen – auch wenn dieses später gar nicht angezeigt wird. Mit dem Icon, das von Divi standardmässig vorgeschlagen wird, funktioniert der Trick leider nicht.
Damit sind die Vorbereitungen erledigt. Sie können sich nun dem CSS-Code annehmen. Kopieren Sie den folgenden Codeblock in das CSS-Stylesheet Ihrer Website. Das funktioniert im Backend unter Design/Customizer/Zusätzliches CSS:
.image-hover-text .et_overlay.et_pb_inline_icon:before {
content: "mehr erfahren";
font-family: inherit !important;
font-size: 24px;
line-height: 1.3em;
text-align: center;
transform: translateX(-50%) translateY(-50%);
margin-left: 0px;
width: 80%;
}Den Code können Sie anpassen – in Zeile 2 etwa steht der Text, der beim hovern angezeigt werden soll. Dieser lässt sich natürlich ändern.
Das Resultat unseres Beispiels ergibt die Ansicht nebenan:
Werbung
Werbung
