Lesefortschritt:

Bilder-Special – Trick #2: Blog-Übersichten aufhübschen: Zwei Styling-Tricks für Bilder

11. März 2023 | CSS-Stylesheet, Divi-Theme, Mediathek

Dieser Beitrag beinhaltet 1291 Wörter. – Geschätzte Lesezeit: ca. 7 Minuten.

Die Blog-Übersichten im Divi-Theme bieten schon einige Möglichkeiten zum Styling. Doch richtig cool wird die Bildwelt, wenn Sie mit ein paar CSS-Tricke noch ein wenig nachhelfen. Zwei Möglichkeiten möchten wir Ihnen heute vorstellen.

Wenn Sie eine Reihe von Beiträgen in einer Blogübersicht darstellen wollen, geht das im Divi-Theme mit dem Blog-Modul sehr fix. Bloss ist deren Darstellung recht starr. Etwa so:

Bewegen Sie die Maus über das Bild. Sie werden sehen: Da passiert gar nichts.

Vielleicht möchten Sie dem dargestellten Beitragsbild einen kleinen Hover-Effekt zuordnen. Das geht mit ein wenig CSS-Code. Wir zeigen Ihnen hier aus den unbegrenzten Möglichkeiten zwei Varianten.

© Feline Rupprecht/pixelio.de

At vero eos et accusam

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

1. Beitragsbild zoomen und leicht drehen

 

Einen sehr schönen Effekt sehen Sie in diesem Beispiel. Bewegen Sie die Maus über das Bild und sehen Sie, was passiert.

 

Diesen Zoom/Dreh-Effekt erreichen Sie mit dem folgenden CSS-Code. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website. Im WordPress-Backend unter Design/Customizer/Zusätzliches CSS:

© Uwe Kunze/pixelio.de

At vero eos et accusam

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.et_pb_post .entry-featured-image-url {
  margin: 0;
}
.et_pb_blog_grid .et_pb_image_container {
  overflow: hidden;
}
.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;
}
.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);
}

Natürlich können Sie den Code beliebig anpassen. Etwa die Animationsgeschwindigkeit (derzeit 0.95 Sekunden) auf den Zeilen 8-10. Oder die Rotation (derzeit 3 Grad) auf den Zeilen 13-15.

Es geht aber noch mehr.

 

2. Bildausschnitt beim Hovern vergrössern

In diesem Beispiel erhält das Bild mehr Platz, wenn Sie die Maus darüber bewegen. Wenn die Maus das Bild wieder verlässt, wechselt es auf den Ursprungszustand zurück.

 

Dieser Effekt funktioniert mit dem folgenden CSS-Code. Kopieren Sie ihn in das CSS-Stylesheet (Design/Customizer/Zusätzliches CSS) Ihrer Website:

© Thommy Weiss/pixelio.de

At vero eos et accusam

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.et_pb_post .entry-featured-image-url {
  margin: 0;
}
.et_pb_blog_grid .et_pb_image_container {
  overflow: hidden;
}
.et_pb_blog_grid .et_pb_image_container img {
  height:180px!important;
  object-fit:cover;
  transition:1.5s;
  transition-timing-function:ease-out;
  width:400px!important;
}
.et_pb_blog_grid .et_pb_post:hover img {
  height:230px !important;
  transition: 0.75s;
  transition-timing-function:ease-out;
}

Auch hier können Sie einige Werte verändern:

  • die Höhe des Bildes auf Zeile 8 (derzeit 180px)
  • die Dauer, bis das Biild wieder im Originalzustand ist auf Zeile 10 (derzeit 1.5 Sekunden)
  • die Breite des dargestellten Bildes auf Zeile 12 (derzeit 400px)
  • die Zielhöhe des Bildes beim Hovern auf Zeile 15 (derzeit 230px)
  • die Dauer, welche der Hover-Effekt dauern soll auf Zeile 17 (derzeit 0.75 Sekunden)

Damit haben Sie zwei ansprechende Animationen für Bilder in Ihren Blogübersichten kennengelernt. Nun sind Sie dran. Pröbeln Sie drauflos. Die Möglichkeiten sind wahrhaftig unbegrenzt.

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