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.
Werbung
Werbung
