Trick # 326 | Dieser Beitrag beinhaltet 1123 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Ein Bild können Sie auf Ihrer Divi-Website auch mit einem Button oder mit einem Textabschnitt überlagern. Das geht ganz einfach mit ein wenig CSS-Code.
in diesem Doppelhack beginnen wir zunächst mit dem Button im Bild. So wie nebenan soll das Resultat aussehen:
Dazu fügen Sie an gewünschter Stelle ein Bildmodul ein und vergeben diesem eine CSS-Klasse – unter den Tab «Erweitert», «CSS-ID und Klassen», dort geben Sie im Feld «CSS-Klasse» die Zeile «button-over-image» ein. Im Tab «Inhalt» müssen Sie ausserdem eine URL eintragen, auf welche das Bild verlinken soll.
Nun wechseln Sie im Backend der Website zu Design/Customizer/Zusätzliches CSS und fügen Sie dort folgenden Block ins CSS-Stylesheet Ihrer Website ein:
/* Button hinzufügen und auf dem Bild zentrieren*/
.button-over-image .et_pb_image_wrap:before {
content: "Hier klicken";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #293280;
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
transition: all .5s ease;
}
/* Button beim hovern stylen */
.button-over-image:hover .et_pb_image_wrap:before {
background-color: #ffffff;
color: #293280;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
letter-spacing: 1px;
}Auf diese Weise wird das Bild bereits mit einem Butto-Overlay dargestellt. Den CSS-Code können Sie natürlich anpassen. Insbesondere beim Button-Text (auf Zeile 3) oder bei den Farben empfehlen wir Ihnen dies.
Doch es geht noch mehr:
Bild mit einem Textabschnitt überlagern
Beim zweiten Trick möchten wir eine Darstellung wie nebenan erreichen:
Auch dafür fügen Sie an gewünschter Stelle ein Bildmodul ein und vergeben diesem eine CSS-Klasse – unter den Tab «Erweitert», «CSS-ID und Klassen», dort geben Sie im Feld «CSS-Klasse» die Zeile «text-over-image» ein. Im Tab «Inhalt» müssen Sie ausserdem eine URL eintragen, auf welche das Bild verlinken soll.
Nun bearbeiten Sie das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) und fügen dort folgenden Block ein:
/* Text hinzufügen und zentrieren */
.text-over-image .et_pb_image_wrap:before {
content: "Dies ist der Titel";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 35%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #293280;
padding: 12px 24px;
font-size: 28px;
font-weight: bold;
text-align: center;
border-radius: 50px;
transition: all .5s ease;
}
.text-over-image .et_pb_image_wrap:after {
content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 65%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #343434;
padding: 12px 24px;
font-size: 20px;
border-radius: 50px;
transition: all .5s ease;
text-align: center;
}
/* Deckkraft des Bildes festlegen */
.text-over-image img {
-webkit-filter: opacity(40%);
/* Safari */
filter: opacity(40%);
margin-top: -1px;
}Der Text-im-Bild funktioniert damit bereits. Anpüassen müssen Sie sicher die Texte in den Zeilen 3 und 21. Ferner werden Sie vielleicht andere Farben auswählen. Wenn sich Text und Titel überlagern, können Sie dies durch andere Werte auf den Zeilen 7 und 25 korrigieren.
Werbung
Werbung
