Lesefortschritt:

Blog-Modul-Special #13: Beitragsbildern im Divi-Blog-Modul einen Zoom-Rotations-Effekt hinzufügen

13. Dezember 2022 | CSS-Stylesheet, Divi-Theme

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

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.