Lesefortschritt:

Bild mit einem Text- oder Button-Overlay versehen

13. März 2024 | CSS-Stylesheet, Divi-Theme

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This