Lesefortschritt:

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

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

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This