Trick # 182 | Dieser Beitrag beinhaltet 479 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Blog-Modul des Divi-Themes kann schon vieles – die Beitragsbilder lassen sich aber nur bedingt steuern. Versehen Sie die Beitragsbilder mit einem Rotations- und Zoom-Effekt, der aktiv wird, sobald Sie die Maus über das Bild bewegen.
Damit Sie den Effekt sehen können, haben wir die Funktion in das Bild nebenan integriert:
Um solches im Blog-Modul von Divi umzusetzen, benötigen Sie etwas CSS-Code. Kopieren Sie die nachfolgenden Zeilen und platzieren Sie sie im CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS:
/* Bildränder festlegen */
.et_pb_post .entry-featured-image-url {
margin: 0;
}
/* Zoom nur innerhalb des Bild-Frames */
.et_pb_blog_grid .et_pb_image_container {
overflow: hidden;
}
/* Definieren des Zoom-Effekt für das Bild */
.et_pb_blog_grid .et_pb_image_container img {
transition: all 0.95s ease;
-moz-transition: all 0.95s ease;
-webkit-transition: all 0.95s ease;
}
/* Raten für Zoom und Rotation des Bildes festlegen */
.et_pb_blog_grid .et_pb_post:hover img {
transform: scale(1.15) rotate(3deg);
-moz-transform: scale(1.15) rotate(3deg);
-webkit-transform: scale(1.15) rotate(3deg);
}Das wars auch schon.
Anpassen können Sie etwa die Dauer des Effekts (derzeit 0.95 Sekunden) auf den Zeilen 13-15. Ferner können Sie die Zoom-Skalierung (hier Faktor 1.15) und die Rotation (momentan 3 Grad) auf den Zeilen 20-22 anpassen.
Werbung
Werbung
