Trick # 361 | Dieser Beitrag beinhaltet 674 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Mit dem Bild-Modul lassen sich Bilder ganz einfach in Divi-Websites einbinden. Sie können aber gleich noch ein wenig gestylt und animiert werden. Wie das geht, erfahren Sie in diesem Trick.
Nebenan sehen Sie das Beispiel eines normalen Bildmoduls:
Das ist schon ganz OK.
Mit ein wenig CSS-Code lassen sich aber noch Stylings definieren und das Bild beim hovern auch gleich vergrössern. Kopieren Sie dazu den folgenden Code und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
img {
border-radius: 10px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-filter:
drop-shadow(5px 5px 5px #000000);
}
img:hover {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}Zur Erklärung: Auf Zeile 2 runden Sie die Ecken ab. Wenn Ihnen das nicht gefällt, lassen Sie einfach diese Zeile weg. Und auf den Zeilen 6 und 7 wird der Schlagschatten definiert. Falls Sie den nicht möchten, einfach auslassen. That easy.
Das obige Beispiel ergibt diesen Effekt:
Hovern Sie mal mit der Maus über das Bild, um die Animation zu sehen.
Übrigens sind Animationen auch möglich, wenn eine Internetseite im Browser geladen wird. Diesen Trick erklären wir im Beitrag «Zoom-Animation für Bilder beim Page-Load».
Werbung
Werbung
