Zur Zeit studiere ich, was man alles mit dem neuen WordPress Rasterblock anstellen kann. Zuerst habe ich einfach mit Absatzblöcken als Items für das Raster gearbeitet, ihnen eine passende Hintergrundfarbe gegeben und so Bilder erstellt. Nun aber wollte ich ein gerastertes Bild zugrundlegen. Und was bietet sich für dieses Grid mehr an als das Bild einer Katze, die auf Hover (oder Touch) eines Auges mit diesem zwinkert oder auf Hover / Touch der Nase ihre Zunge rausstreckt :-)
WordPress Rasterblock mit 25 Items
Für das Grid mit Katze braucht es ein Bild, zerlegt in 25 Quadrate, jeweils 100 x 100 Pixel groß. Zwei dieser Quadrate allerdings sind zusammengefasst zu je einem Rechteck: das linke Auge (200 x 100 Pixel) und das Mäulchen (100 x 200 Pixel). Und für diese beiden Bilder braucht zwei Versionen: das Auge einmal offen und einmal geschlossen und das Mäulchen einmal geschlossen und einmal mit herausgestreckter Zunge.
Insgesamt ergibt das 25 Bilder, von denen allerdings nur 23 zu Grid Items eines Rasterblocks werden. Dabei umfasst der Rasterblock 5 Spalten und 5 Reihen. Er bietet also Platz für 25 Grid Items.
Item 14 (das linke Auge) dehnt sich über zwei Spalten aus, Item 19 (das Mäulchen) dehnt sich über zwei Reihen aus. Beide erhalten je eine CSS-Klasse (luzi14 und luzi19). Der Rasterblock besteht dann allerdings noch immer aus 5 Spalten und 5 Reihen.
Die Block-Abstände des Rasters auf 0 setzen. Das sorgt dafür, dass das Raster nicht mehr als solches ersichtlich ist. Das Bild erscheint nun wieder als Einheit. Bei der Arbeit hilft zur Orientierung aber ein Block-Abstand von einem Pixel.
Sollte das Raster (wie in meinem Fall mit seinen 500 x 500 px) schmaler als der Contentbereich sein, den Rasterblock seinerseits im Rahmen eines Gruppe-Blocks mit einer Contentbreite von 500 px veröffentlichen.
Der Rasterblock erhält eine Klasse (luzi-grid).
Hover-Effekt: Bildaustausch für das Grid mit Katze
Der Bildaustausch beim Hover (Desktop – auf Mobilgeräten beim Touch) wird über CSS realisiert.
Das Vorgehen ist wie folgt: Bei Hover (oder Touch) wird das Bild (offenes Auge / geschlossenes Mäulchen) ausgeblendet und das figure Element des Bild-Blocks erhält ein Hintergrundbild (geschlossenes Auge / herausgestreckte Zunge).
Zuvor aber sicherstellen, dass keines der 23 kleinen Bilder verlinkt ist. Also weder auf die Bilddatei noch auf die Anhangseite.
CSS für den Hover-Effekt
.luzi-grid {
align-items: stretch;}
/* Bildaustausch des linken Auges */
figure.wp-block-image.size-full.luzi14:hover img {visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;}
figure.wp-block-image.size-full.luzi14:hover {
background-image: url(https://...[URL der Bilddatei mit geschlossenem Auge]...);
background-size: 100%;
}
/* Bildaustausch des Mäulchens */
figure.wp-block-image.size-full.luzi19:hover img {visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;}
figure.wp-block-image.size-full.luzi19:hover {
background-image: url(https://https://...[URL der Bilddatei mit herausgestreckter Zunge]...);
background-size: 100%;
} Vielleicht braucht die Welt nicht zwingend solch ein Grid mit Katze. Schaden kann es aber auch nicht. Und definitiv lernt es sich mit Katze viel besser.