Hover-Effekt bei Bildern in Divi – mit Text und Link

Date/time:
Lesezeit: 2 Minuten, 6 Sekunden

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.

Klicken Sie den untenstehenden Button um den Inhalt von shop.marjeta-prah-moses.de neu zu laden.
Neu laden

PHA+PGlmcmFtZSBzcmM9Imh0dHBzOi8vc2hvcC5tYXJqZXRhLXByYWgtbW9zZXMuZGUvZGl2aS1ob3Zlci1lZmZlY3QtYmVpLWJpbGRlcm4taW4tZGl2aS1taXQtdGV4dC11bmQtbGluay8iIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI3MDBweCIgZnJhbWVib3JkZXI9IjAiIHNjcm9sbGluZz0ibm8iPjwvaWZyYW1lPjwvcD4=

Hier nun die Anleitung

für alle die gerne, ohne Plugin und nur mit etwas CSS, diese Funktion in Divi umzusetzen möchten.

  1. Eine neue Standardsektion erstellen
  2. Eine Zeile mit beliebig vielen Spalten einfügen
    Dieser Zeile vergebt ihr eine Custom CSS Class: projekt-hover
  3. 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
  4. 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.

Veröffentlicht von: Marjeta Prah-Moses

Seit 2009 selbständig, ist Wordpress nun seit über sieben Jahren meine Leidenschaft. Von Entrepreneure, über Grafiker, bis zu den kleinen, mittelständischen Unternehmen, unterstütze ich alle die sich auf den Weg zur eigenen Website machen.

3 Comments

  1. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Der Schutz Ihrer Daten ist mir wichtig, ...

... daher wird Ihre IP Adresse anonymisiert für meine Google Analytics - Statistik verwendet. Klicken Sie auf "Cookies akzeptieren", und helfen Sie mir damit meine Inhalte besser auf Sie abzustimmen.

Bitte wählen Sie eine Option aus.

Danke <3

Ihre Auswahl wurde gespeichert!

Hilfe

Hilfe

Um fortzufahren müssen Sie eine Auswahl treffen. Unterhalb finden Sie eine Erklärung über die verschiedenen Optionen.

  • Cookies akzeptieren:
    Alles Cookies wie z.B. Tracking- und Analytische-Cookies, sowie technisch notwendige Cookies.
  • Keine Cookies akzeptieren:
    Keine Cookies außer solche die notwendig sind um die Inhalte sehen zu können.

Sie können jederzeit ihre Cookie Einstellungen hier ändern: Datenschutzerklärung. Impressum

Zurück