Tipps und Tricks
Bio-Hover Effekt

TUTORIAL & CSS “BIO-HOVER-EFFEKT 1”

Text-Modul

Für diesen Effekt benötigst Du ein Text-Modul.

Im Text-Modul wird ein DIV eingesetzt und auf der DIVI-Seite ein Benutzerdefinierte CSS…

Wie man in DIVI einen “Bio-Hover-Effekt” für Personen oder Bilder hinzufügt.

DEMO BIO-HOVER-EFFEKT
pc-poggemeier_2

DEMO-Webseiten

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen.

pc-poggemeier_1

DEMO-WEBSEITEN 2

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen.

TUTORIAL & CSS “BIO-HOVER-EFFEKT”
Schritt 1: Hochladen deiner Bilder
Der erste Schritt ist, alle Bilder hochzuladen, die Du für Deine Seite verwenden möchtest. Für dieses Tutorial musst Du sicherstellen, dass alle Deine Bilder die gleiche Größe und die gleichen Seitenverhältnisse haben. Du musst auch sicherstellen, dass Deine Bilder alle eine anständige Größe haben. Für mein Beispiel verwende ich Bilder, die 500px von 500px sind. Sobald Deine Bilder hochgeladen sind, musst Du eine Liste der jeweiligen URLs der Bilder erstellen, wie Du sie später benötigen wirst. Diese findest Du, indem Du auf die Miniaturansicht eines Bildes in der Mediengalerie klickst und auf der oberen rechten Seite der Seite auf  die “Bild-Details” schaust.
Schritt 2: Aufbau der Sektion
Das erste, was Du tun musst, ist ein Standard-Abschnitt zu erstellen. Weise Deinem Abschnitt eine Hintergrundfarbe zu. Als nächstes fügst Du eine einzelne Zeile mit zwei Spalten hinzu. Füge ein Textmodul für Dein Bild ein. Suche Dir eine passende Schriftart und Schriftfarbe aus und eine Schriftgröße von etwa 40px.

Als nächstes fügst Du jeweils ein einzelnes Textmodul hinzu und fügst den folgenden Code in die Texteditor-Registerkarte des Inhaltsbereichs ein:

TEXT-MODUL CODE
[crayon attributes]

ÜBERSCHRIFT

BESCHREIBUNG

[/crayon]

Bild-URL aus Mediathek kopieren und einfügen. Name der Überschrift und Beschreibung ändern.
ACHTUNG!!!
sollte das Bild nicht angezeigt werden, auch wenn die Bild-URL korrekt ist, dann müssen evtl. die Anführungszeichen (“) von Hand nochmals eingegeben werden. 
Schritt 3: CSS-CODE KOPIEREN UND EINFÜGEN
Zum Abschluss musst Du noch den “CSS-CODE” für die Animation in die Benutzerdefinierte CSS-Box der Seite eintragen.

Klicke danach auf Speichern und Voilà! Du solltest jetzt den Hover-Effekt auf Deinen Bildern sehen können.

SEITEN CSS-CODE
.hover-bio-wrapper {
    position: relative;
    color: rgba(0,0,0,0);
    width: 100%
}
figure.hover-bio img{
    display: block;
}
figure.hover-bio {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 0;     
}
figure.hover-bio::before, figure.hover-bio::after{
    position: absolute;
    background: black;
            opacity: 0.3;
            content: “;
    height: 100%;
            width: 100%;
    display: block;
    top: 0;
    left 0;
    -moz-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}
figure.hover-bio figcaption{
    position: absolute;
    background: #fff;
            display: block;
    line-height: 1.7em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    padding: 10px;
    z-index: 100;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    top: 50%;
    left: 0;
    -moz-transform: translate3d(-100%, -50%, 0);
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
    opacity: 0;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}
figure.hover-bio img{
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}
figure.hover-bio figcaption{
    top: 100%;
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
figure.hover-bio:hover img {
            opacity: .5;
}
figure.hover-bio:hover figcaption{
    background-color: #E91E63;
    color: #fff;
            opacity: .9;
    -moz-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
            box-shadow: 0px -2px 28px rgba(255,255,255, 0.3);
}

“BIO-HOVER-EFFEKT 2”

Blurb-Modul

Der Effekt lässt sich auch in einem Blurb-Modul (Informationstext-Modul) einsetzen..

Zwei Effekte stehen zur Auswahl.

CSS-Klasse: image-hover-layout show-title

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)
<style><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_blurb_content {<!-- [et_pb_line_break_holder] --> max-width: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_blurb_content img {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column {<!-- [et_pb_line_break_holder] --> overflow: hidden;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column img {<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> -moz-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column:hover img {<!-- [et_pb_line_break_holder] --> transform: scale(1.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column:hover .et_pb_main_blurb_image:after {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> background: rgba(0, 0, 0, 0.4);<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_main_blurb_image {<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column .et_pb_blurb_content:before {<!-- [et_pb_line_break_holder] --> top: 50px;<!-- [et_pb_line_break_holder] --> right: 30px;<!-- [et_pb_line_break_holder] --> bottom: 50px;<!-- [et_pb_line_break_holder] --> left: 30px;<!-- [et_pb_line_break_holder] --> border-top: 1px solid #fff;<!-- [et_pb_line_break_holder] --> border-bottom: 1px solid #fff;<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(0, 1);<!-- [et_pb_line_break_holder] --> transform: scale(0, 1);<!-- [et_pb_line_break_holder] --> -webkit-transform-origin: 0 0;<!-- [et_pb_line_break_holder] --> transform-origin: 0 0;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;<!-- [et_pb_line_break_holder] --> transition: opacity 0.35s, transform 0.35s;<!-- [et_pb_line_break_holder] --> z-index: 1;<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column .et_pb_blurb_content:after {<!-- [et_pb_line_break_holder] --> top: 30px;<!-- [et_pb_line_break_holder] --> right: 50px;<!-- [et_pb_line_break_holder] --> bottom: 30px;<!-- [et_pb_line_break_holder] --> left: 50px;<!-- [et_pb_line_break_holder] --> border-right: 1px solid #fff;<!-- [et_pb_line_break_holder] --> border-left: 1px solid #fff;<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(1, 0);<!-- [et_pb_line_break_holder] --> transform: scale(1, 0);<!-- [et_pb_line_break_holder] --> -webkit-transform-origin: 100% 0;<!-- [et_pb_line_break_holder] --> transform-origin: 100% 0;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;<!-- [et_pb_line_break_holder] --> transition: opacity 0.35s, transform 0.35s;<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column:hover .et_pb_blurb_content:before, .image-hover-layout .et_pb_column:hover .et_pb_blurb_content:after {<!-- [et_pb_line_break_holder] --> -webkit-transition-delay: 0.15s;<!-- [et_pb_line_break_holder] --> transition-delay: 0.15s;<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(1);<!-- [et_pb_line_break_holder] --> transform: scale(1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column .et_pb_blurb_container {<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 40%; /* Adjust this if the text is in the wrong position */<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> -moz-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] --> padding: 0 55px;<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] --> line-height: 1em !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout .et_pb_column:hover .et_pb_blurb_container {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 45%;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> line-height: 1em !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout.show-title h4 {<!-- [et_pb_line_break_holder] --> background: #fff;<!-- [et_pb_line_break_holder] --> padding: 10px!important;<!-- [et_pb_line_break_holder] --> display: inline-block;<!-- [et_pb_line_break_holder] --> margin-bottom: 10px;<!-- [et_pb_line_break_holder] --> color: #333 !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout.show-title .et_pb_blurb_container {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> top: 45%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout.show-title .et_pb_column:hover .et_pb_blurb_container {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> top: 40%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout.show-title .et_pb_blurb_container p {<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-layout.show-title .et_pb_column:hover .et_pb_blurb_container p {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item {<!-- [et_pb_line_break_holder] --> overflow: hidden;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item img {<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> -moz-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item:hover img {<!-- [et_pb_line_break_holder] --> transform: scale(1.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_image:before {<!-- [et_pb_line_break_holder] --> top: 50px;<!-- [et_pb_line_break_holder] --> right: 30px;<!-- [et_pb_line_break_holder] --> bottom: 50px;<!-- [et_pb_line_break_holder] --> left: 30px;<!-- [et_pb_line_break_holder] --> border-top: 1px solid #fff;<!-- [et_pb_line_break_holder] --> border-bottom: 1px solid #fff;<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(0, 1);<!-- [et_pb_line_break_holder] --> transform: scale(0, 1);<!-- [et_pb_line_break_holder] --> -webkit-transform-origin: 0 0;<!-- [et_pb_line_break_holder] --> transform-origin: 0 0;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;<!-- [et_pb_line_break_holder] --> transition: opacity 0.35s, transform 0.35s;<!-- [et_pb_line_break_holder] --> z-index: 4;<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_image:after {<!-- [et_pb_line_break_holder] --> top: 30px;<!-- [et_pb_line_break_holder] --> right: 50px;<!-- [et_pb_line_break_holder] --> bottom: 30px;<!-- [et_pb_line_break_holder] --> left: 50px;<!-- [et_pb_line_break_holder] --> border-right: 1px solid #fff;<!-- [et_pb_line_break_holder] --> border-left: 1px solid #fff;<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(1, 0);<!-- [et_pb_line_break_holder] --> transform: scale(1, 0);<!-- [et_pb_line_break_holder] --> -webkit-transform-origin: 100% 0;<!-- [et_pb_line_break_holder] --> transform-origin: 100% 0;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;<!-- [et_pb_line_break_holder] --> transition: opacity 0.35s, transform 0.35s;<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] --> z-index: 4;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_image:before, .image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_image:after {<!-- [et_pb_line_break_holder] --> -webkit-transition-delay: 0.15s;<!-- [et_pb_line_break_holder] --> transition-delay: 0.15s;<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> -webkit-transform: scale(1);<!-- [et_pb_line_break_holder] --> transform: scale(1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_title, .image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_caption {<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 40%;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> -webkit-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> -moz-transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease-in-out;<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] --> padding: 0 55px;<!-- [et_pb_line_break_holder] --> pointer-events: none;<!-- [et_pb_line_break_holder] --> line-height: 1em !important;<!-- [et_pb_line_break_holder] --> z-index: 3;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_title {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 45%;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> line-height: 1em !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_caption {<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 55%;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> line-height: 1em !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout.show-title .et_pb_gallery_title, .image-hover-gallery-layout.show-title .et_pb_gallery_item:hover .et_pb_gallery_title {<!-- [et_pb_line_break_holder] --> background: #fff;<!-- [et_pb_line_break_holder] --> padding: 10px !important;<!-- [et_pb_line_break_holder] --> margin: 0 auto;<!-- [et_pb_line_break_holder] --> color: #333 !important;<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] --> left: 55px;<!-- [et_pb_line_break_holder] --> right: 55px;<!-- [et_pb_line_break_holder] --> width: initial;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-hover-gallery-layout.show-title .et_pb_gallery_item:hover .et_pb_gallery_title {<!-- [et_pb_line_break_holder] --> top: 35%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)

CSS-Klasse: image-hover-layout

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)

Bio-Hover für Blurb-Module (Informationstext)

Wie Du im oberen Bereich sehen kannst gibt es hier einen anderen Effekt. Dieser Effekt funktioniert mit einem “Blurb-Modul” und etwas “CSS”.  Der CSS-CODE wird in ein Code-Modul geschrieben so das er am Ende im Visuellen Builder nicht sichtbar ist.

  1. Eine neue Sektion erstellen (blauer Rahmen)
  2. 3 Spalten einfügen (grüner Rahmen)
  3. Blurb-Modul einfügen
  4. Titel, Text und Bild einfügen
  5. je nach belieben den passenden Effekt per CSS-Klasse einfügen
  6. Speichern
  7. Code-Modul unter dem Blurb einfügen
  8. CSS-Code kopieren und einfügen
  9. Fertig!

CSS-Kassen:

image-hover-layout show-title

image-hover-layout

Informationstext mit Titel (Blurb Module)

& HIER DER TEXTINHALT (BLURB MODULE TEXT)

Informationstext mit Titel (Blurb Module)

& hier der Textinhalt (Blurb Module Text)

"CSS-CODE" für das Code-Modul
[crayon attributes]
.image-hover-layout .et_pb_blurb_content {
max-width: 100%;
}

.image-hover-layout .et_pb_blurb_content img {
width: 100%;
}

.image-hover-layout .et_pb_column {
overflow: hidden;
position: relative;
}

.image-hover-layout .et_pb_column img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}

.image-hover-layout .et_pb_column:hover img {
transform: scale(1.1);
}

.image-hover-layout .et_pb_column:hover .et_pb_main_blurb_image:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
content: ”;
pointer-events: none;
}

.image-hover-layout .et_pb_main_blurb_image {
margin: 0;
}

.image-hover-layout .et_pb_column .et_pb_blurb_content:before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
content: ”;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
z-index: 1;
pointer-events: none;
}

.image-hover-layout .et_pb_column .et_pb_blurb_content:after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
position: absolute;
content: ”;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
pointer-events: none;
}

.image-hover-layout .et_pb_column:hover .et_pb_blurb_content:before, .image-hover-layout .et_pb_column:hover .et_pb_blurb_content:after {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.image-hover-layout .et_pb_column .et_pb_blurb_container {
opacity: 0;
color: #fff;
position: absolute;
top: 40%; /* Adjust this if the text is in the wrong position */
width: 100%;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: 0;
padding: 0 55px;
pointer-events: none;
line-height: 1em !important;
}

.image-hover-layout .et_pb_column:hover .et_pb_blurb_container {
opacity: 1;
position: absolute;
top: 45%;
width: 100%;
text-align: center;
color: #fff;
line-height: 1em !important;
}

.image-hover-layout.show-title h4 {
background: #fff;
padding: 10px!important;
display: inline-block;
margin-bottom: 10px;
color: #333 !important;
}

.image-hover-layout.show-title .et_pb_blurb_container {
opacity: 1;
top: 45%;
}

.image-hover-layout.show-title .et_pb_column:hover .et_pb_blurb_container {
opacity: 1;
top: 40%;
}

.image-hover-layout.show-title .et_pb_blurb_container p {
opacity: 0;
}

.image-hover-layout.show-title .et_pb_column:hover .et_pb_blurb_container p {
opacity: 1;
}

.image-hover-gallery-layout .et_pb_gallery_item {
overflow: hidden;
position: relative;
}

.image-hover-gallery-layout .et_pb_gallery_item img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}

.image-hover-gallery-layout .et_pb_gallery_item:hover img {
transform: scale(1.1);
}

.image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_image:before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
content: ”;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
z-index: 4;
pointer-events: none;
}

.image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_image:after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
position: absolute;
content: ”;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
pointer-events: none;
z-index: 4;
}

.image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_image:before, .image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_image:after {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

.image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_title, .image-hover-gallery-layout .et_pb_gallery_item .et_pb_gallery_caption {
opacity: 0;
color: #fff;
position: absolute;
top: 40%;
width: 100%;
text-align: center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: 0;
padding: 0 55px;
pointer-events: none;
line-height: 1em !important;
z-index: 3;
}

.image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_title {
opacity: 1;
position: absolute;
top: 45%;
width: 100%;
text-align: center;
color: #fff;
line-height: 1em !important;
}

.image-hover-gallery-layout .et_pb_gallery_item:hover .et_pb_gallery_caption {
opacity: 1;
position: absolute;
top: 55%;
width: 100%;
text-align: center;
color: #fff;
line-height: 1em !important;
}

.image-hover-gallery-layout.show-title .et_pb_gallery_title, .image-hover-gallery-layout.show-title .et_pb_gallery_item:hover .et_pb_gallery_title {
background: #fff;
padding: 10px !important;
margin: 0 auto;
color: #333 !important;
opacity: 1;
left: 55px;
right: 55px;
width: initial;
}

.image-hover-gallery-layout.show-title .et_pb_gallery_item:hover .et_pb_gallery_title {
top: 35%;
}

[/crayon]

CSS-Kassen:
image-hover-layout show-title

CSS-Kassen:
image–hover–gallery–layout

CSS-Kassen:
image-hover-layout

“BIO-HOVER-EFFEKT 3”

Galerie-Modul

Der Effekt lässt sich auch in eine Galerie-Modul einsetzen..
Der Code für die Galerie ist im oberen CSS-Code enthalten du musst nur folgende CSS-Klasse im Galerie-Modul einfügen.

CSS-Klasse: image-hover-gallery-layout

car-2-1920x1080

car-2-1920×1080

car pcp

car pcp

stars-1920x1080-pcp

stars-1920×1080-pcp

WP-DIVI-Tutorials
..:: WordPress | Divi | Plugins | CSS | uvm ::..