Trick # 330 | Dieser Beitrag beinhaltet 1128 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Mit dem Informationstext-Modul des Divi-Themes – auch «Blurb-Modul» genannt – lassen sich Teaser ganz einfach anlegen. Und mit ein wenig CSS-Code auch ganz nett aufhübschen. Wir zeigen Ihnen, wie das geht.
Fügen Sie zunächst ein «Informationstext-Modul» (Blurb-Modul) an gewünschter Stelle ein, fügen Sie einen Titel hinzu, etwas Text und ein Bild.
Zunächst sieht das wenig spektakulär aus. Etwa so wie nebenan:
Da können Sie Hand anlegen. Geben Sie dem Modul zunächst eine CSS-Klasse: «hover-blurb». Diese tragen Sie im Tab «Erweitert», unter «CSS-ID & Klassen» ins Textfeld «CSS-Klasse» ein.
Nun kopieren Sie folgenden Textblock ins CSS-Stylesheet Ihrer Website. Das können Sie im Backend unter Design/Customizer/Zusätzliches CSS tun:
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
/* Cursor beim hovern anpassen */
.hover-blurb .et_pb_blurb_content {
cursor: pointer;
}
/* Text vor dem hovern ausblenden */
.hover-blurb .et_pb_blurb_description {
display: none
}
/* Bilderecken abrunden und sanfte Transition einstellen */
.hover-blurb .et_pb_blurb_container,
.hover-blurb .et_pb_image_wrap {
border-radius: 15px!important;
transition: all 0.4s ease-in-out;
}
/* Das Auslösen des Hover-Effekts einschränken und den Titel zentriert ausrichten */
.hover-blurb .et_pb_module_header {
position: absolute;
left: 60%;
transform: translateX(-60%);
pointer-events: none;
width: 100%;
}
/* Zwischenraum des Textblocks anpassen */
.hover-blurb .et_pb_blurb_description {
padding: 0 5%;
}
/* Ganzen Content beim hovern über das Bild legen, zentrieren und Farbe definieren */
.hover-blurb .et_pb_blurb_content:hover .et_pb_blurb_container {
position: absolute;
top: 35%;
transform: translateY(-35%);
color: #ffffff !important;
cursor: pointer;
}
/* Overlay-Effekt beim hovern definieren */
.hover-blurb .et_pb_blurb_content:hover .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
left: 0;
top: 0;
opacity: 0.5;
border-radius: 15px!important;
}
/* Titel beim hovern platzieren */
.hover-blurb .et_pb_blurb_content:hover .et_pb_module_header {
position: relative;
text-align: center;
}
/* Farbe des Titels und des Texts beim hovern anpassen */
.hover-blurb .et_pb_blurb_content:hover .et_pb_blurb_container .et_pb_module_header {
color: #ffffff;
font-size: 2rem;
}
/* Text beim hovern anzeigen */
.hover-blurb .et_pb_blurb_content:hover .et_pb_blurb_description {
display: block;
}
/* Bild beim hovern zoomen */
.hover-blurb .et_pb_blurb_content:hover .et_pb_image_wrap {
transform: scale(1.10);
}Den Code können Sie gerne anpassen – der Efekt startet, wenn Sie die Maus über das Blurb-Modul bewegen. In unserem Fall ist das Resultat das folgende:
Hübsch. Oder?
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Werbung
Werbung
