Bilder mit Text Hover

Bilder mit Text-Hover Effekten in Divi zu erstellen ist aufwendig heisst es immer. Nun - wenn ich Dir zeige wie, wirst auch Du feststellen, dass dieser Spruch nicht ganz stimmt. Ein klein wenig CSS und paar Einstellungen in den Modulen. Das war's.
Geschrieben von: Benny
Veröffentlicht: 19. Apr. 2019

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Mein Titel

Mein kleiner Zusatztext etwas länger

Mein Titel

Mein kleiner Zusatztext etwas länger einen noch längeren Text

Mein Titel

Mein kleiner 

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Titel 1

Your content goes here. Edit or remove this text inline or in the module Content settings.

Einstellungen:

Gehe in die Zeileneinstellungen und füge bei «Fortgeschritten» folgende Klasse ein:
bh_hover_overlay

Den CSS Code kannst Du in Dein style.css des Child-Themes einfügen oder unter Divi Optionen, ganz runter scrollen bis zum CSS Feld. 


.bh_hover_overlay .et_pb_text {
  opacity:0;
  transition: .4s ease-in-out;
}

.bh_hover_overlay .et_pb_text:hover {
  opacity:1;
  background:rgba(90,68,255,0.9);
  cursor: pointer;
}