Ich mag Divi, das dürfte sich langsam rumgesprochen haben. Es ist flexibel und anpassbar. Ein Spaß für jeden der gerne ein Theme mit guten Funktionen verwenden mag und auch noch einige eigene Erweiterungen reinstricken möchte.
Was mir allerdings immer fehlte war die Möglichkeit eines Hover Effektes, bei dem ein klickbarer Text erscheint, wenn ich mit der Mouse über das Bild fahre.
Basis dieses Artikels ist der englischsprachige Artikel von Yates Design das diese Funktions-Erweiterung gut darstellt, allerdings noch etwas stärker mit Effekten arbeitet. Ich persönlich habe keinen zusätzlichen Effekt mit weichem Übergang oder Rahmen gebraucht, daher ist mein Code sehr stark aufs wesentliche reduzierte.
Hier nun die Anleitung
für alle die gerne, ohne Plugin und nur mit etwas CSS, diese Funktion in Divi umzusetzen möchten.
- Eine neue Standardsektion erstellen
- Eine Zeile mit beliebig vielen Spalten einfügen
Dieser Zeile vergebt ihr eine Custom CSS Class: projekt-hover - Das Bild Modul hinzufügen und ein Bild reinladen. In den Optionen
– Raum unter dem Bild entfernen auf „Ja“ setzen
– unter Erweiterte Designoption -> Volle Breite nutzen & Auf mobilen Geräten das Bild immer zentrieren auf auf „Ja“ setzen.
– Speichern - das Handlungsaufruf Modul hinzufügen
– Titel, Button-URL, Button-Text ausfüllen und
– Hintergrundfarbe verwenden auf „Nein“ setzen
– Speichern
Seite aktualisieren oder veröffentlichen.
Der Code der alles zum funktionieren bringt
Und nun wechselt ihr zu Divi -> Theme Optionen und gebt ganz unten unter Benutzerdefinierte CSS, folgendes ein:
.projekt-hover .et_pb_column { overflow: hidden; position: relative; } .projekt-hover .et_pb_column:hover .et_pb_image:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(182, 71, 26, 0.8); content: ''; } .projekt-hover .et_pb_column .et_pb_promo_description:before { top: 50px; right: 30px; bottom: 50px; left: 30px; } .projekt-hover .et_pb_column .et_pb_promo_description:after { top: 30px; right: 50px; bottom: 30px; left: 50px; } .projekt-hover .et_pb_column .et_pb_promo_description h2 { opacity: 0; color: #fff; position: absolute; top: 37%; width: 100%; text-align: center; margin: 0; padding: 0; } .projekt-hover .et_pb_column .et_pb_promo_description p { opacity: 0; color: #fff; position: absolute; top: 42%; width: 100%; text-align: center; } .projekt-hover .et_pb_column:hover .et_pb_promo_description h2 { opacity: 1; position: absolute; top: 40%; width: 100%; text-align: center; color: #fff; } .projekt-hover .et_pb_column:hover .et_pb_promo_description p { opacity: 1; position: absolute; top: 50%; width: 100%; text-align: center; color: #fff; } .projekt-hover .et_pb_promo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .projekt-hover .et_pb_promo_button { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Fertig. Das war´s auch schon.
Viel Spaß damit.
Hallo Marjeta,
toller Effekt, hab ihn gerade eingebaut. Frage, kann ich unter Theme-Optionen, untereinander mehrere Codes eingeben? Natürlich jedes mit eigenen Projekt-Code.
Viel Grüße vom Chiemsee
Klaus
Hallo Klaus,
wenn die Darstellung immer die selbe sein soll dann brauchst Du unter Theme Optionen im CSS nichts ändern und einfach der neuen Zeile die gleich Klasse „.projekt-hover“ zuweisen.
Wenn Du an der Darstellung etwas ändern möchtest: Ja, dann einfach den kompletten „.projekt-hover“ Code kopieren und darunter einfügen und das „.projekt-hover“ durch was anderes z.B. „.projekt-hover-2“ ersetzen (keine Umlaute, keine Leerzeichen).
Die neue Zeile, in der (neuen) Sektion, dann natürlich mit dieser neuen CSS Klasse beglücken.
Ich hoffe das hilft Dir weiter.
Viele Grüße
Marjeta
Hallo Marjeta,
ich habe den Effekt bei mir eingesetzt und es sieht auch wirklich gut aus. Wie kann ich den Text denn auch noch vertikal zentrieren?
Das würde mir wirklich helfen.
Viele Grüße
Versuch mal im Modul Handlungsaufruf, unter dem Reiter Erweitert -> „Beschreibung“, folgendes CSS einzugeben:
position: static;
Hallo Marjeta,
vielen Dank für diesen Beitrag. Ich habe den Effekt bei mir auf der Startseite eingebaut und alles hat wunderbar geklappt.
Viele Grüße
Domink