Overlay Grid
Grid aus Cards mit Text auf dem Foto mit Overlay, gleichmäßig oder als Mosaik, mit Bändern und Buttons
Die Beispiele sind nur ein Teil. Jede Tile hat außerdem die erweiterten Optionen: Animationen, Mauseffekte, Sichtbarkeit nach Gerät oder Datum, Position und vieles mehr.
01
Frisch eingefügt
So sieht sie aus, sobald du sie der Seite hinzufügst, vor jeder Änderung.
02
Die Reiseziele eines Reiseveranstalters
Drei vertikale Cards im Format 3:4, Text unten links auf einem dunklen Verlaufs-Overlay, so breit wie die Card, oranges Band „Neues“ und Pfeil „Entdecken“.
03
Das Team als Masonry: hohe und breite Zellen
Masonry-Anordnung mit vier Spalten auf Zeilen von 200 px: Manche Cards belegen zwei Zeilen, andere zwei Spalten; Schwarz-Weiß-Fotos, die beim Hover Farbe annehmen.
04
Die Leistungen eines Startups: Foto, Icons und Grafik
Cards müssen nicht unbedingt Fotos sein: Hier ein Foto, eine Card mit Icon auf Blau, eine mit Karomuster auf Rot und eine reine Textcard auf Dunkel.
05
Die Räume des Hauses, volles Overlay und zentrierter Text
Zwei Spalten im Format 16:9 mit rotem Overlay über dem ganzen Foto, großer zentrierter Überschrift und Radius 24.
06
Ein Modeschaufenster in Schwarz-Weiß
Fünf aneinanderstoßende Spalten im Format 2:3, ohne Overlay und ohne Radius: Schwarz-Weiß-Fotos, die beim Hover Farbe annehmen, Name und Preis oben links.
07
Fotokurse, mit Band und Button
Drei Cards im Format 4:5 mit wechselnden Ecken (rund, eckig), zentriertem Text unten, Pillen-Button „Abonnieren“, blauem Band und einem leichten Zoom mit Drehung beim Hover.
08
Der Stil „Magazine Mosaic“ für ein Magazin
Der Stil erhöht die Cards auf 380 px, dunkelt das Overlay ab und ergänzt eine unterstrichene Aufforderung: drei Artikel eines Architekturmagazins.
