{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "produktkarte-bildwechsel", "name": "Produktkarte mit Bildwechsel", "name_en": "Product card with second image on hover or swipe", "kurz": "Produktkarte, die bei Hover oder Fokus ein zweites Bild zeigt oder mit Bildzonen durch vier Bilder blättert; auf dem Telefon wischbar, Preis inkl. MwSt. und Zustand stehen fest und springen nie.", "kategorie": "Hover", "kategorie_slug": "hover", "kategorie_nr": 7, "bau_chat": "C4", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "ruhig", "präzise", "luxuriös" ], "stimmung_roh": [ "präzise", "ruhig", "hochwertig" ], "technik": [ "css", "vanilla-js", "pointer-events", "scroll-snap", "svg", "intl" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Eine Produktkarte zeigt in Ruhe immer denselben Bildtyp, meist den Freisteller. Bei Hover oder Tastaturfokus wechselt sie zu einem zweiten Bild: Seitenansicht, Detail oder Anwendung. Mit mehreren Bildern teilt sich die Bildfläche in unsichtbare Zonen, die Zeigerposition wählt das Bild, Punkte zeigen, wo man ist. Auf dem Telefon wischt man die Bilder in der Karte, ein Tippen führt zur Produktseite. Name, Preis inkl. MwSt. und Verfügbarkeit stehen immer sichtbar und springen nie.", "warum_es_wirkt": "Das zweite Bild beantwortet die nächste Frage, bevor man klickt: Wie sieht es von der Seite aus, wie groß ist es, wie wirkt es im Einsatz. Baymard empfiehlt für visuell geprägte Ware die Kombination aus Freisteller und Bild im Einsatz, mit einem einheitlichen Standardbild. Weil Preis und Name fest stehen, bleibt die Liste ruhig und vergleichbar.", "wann_einsetzen": "Sortimente, bei denen die Form zählt: Brillen und Hörgeräte, Mode, Schuhe, Möbel, Keramik, Fahrräder, Spielwaren, Bücher (Umschlag und Innenseite). Auf Kategorieseiten, Neuheiten-Reihen und Empfehlungen, auch ohne vollen Shop.", "wann_nicht": "Wenn es kein echtes zweites Bild gibt; ein gespiegeltes oder nur vergrößertes Bild verwirrt. Nicht für Dienstleistungen oder Texte. Wichtige Angaben (Preis, Farbe, Verfügbarkeit) nie nur im Hover-Zustand zeigen. Auf Touch nicht „erst tippen zeigt Bild 2, zweites Tippen öffnet“, das bricht die Erwartung.", "varianten": [ "Zweitbild: ein zweites Bild bei Hover und Fokus, auf Touch nur das erste", "Bildzonen: drei bis vier Bilder, die Zeigerposition wählt das Bild, Punkte als Tasten; auf Touch Wischreihe mit Scroll-Snap", "Zustände ohne Sprung: neu, nur im Laden, letztes Stück, zurzeit nicht vorrätig" ], "umsetzung": "Jede Karte ist ein
mit einem Link auf den Namen, der per ::after die ganze Karte abdeckt (wie karte-ganzflaechig-klickbar). Die Bildfläche hat ein festes aspect-ratio, alle Bilder liegen per grid-area übereinander, nur das aktive hat opacity 1. Zweitbild: :hover und :focus-within der Karte blenden Bild 2 ein (nur unter @media (hover: hover)), dazu scale 1.03 → 1. Bildzonen: pointermove rechnet aus der x-Position den Index (Math.floor(x / Breite × Anzahl)), pointerleave setzt auf Bild 1 zurück; die Punkte sind echte Knöpfe in einer Gruppe mit einem Tab-Stopp und Pfeiltasten, sie liegen per z-index über dem Karten-Link. Unter @media (hover: none) wird die Bildfläche zu einer waagerechten Reihe mit scroll-snap-type: x mandatory, die Punkte folgen per scroll-Ereignis. Zweite Bilder erst bei pointerenter oder im Sichtbereich laden (loading=lazy, decode()). Preis mit Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}), Zusatz „inkl. MwSt.“ und bei Versand „zzgl. Versand“ mit Link. Zustände (neu, nur im Laden, letztes Stück, nicht vorrätig) stehen in einer Zeile mit fester Höhe, damit nichts springt. Preisangaben vom Kunden prüfen lassen.", "mobil": "Zwei Karten nebeneinander, ab 360 px eine. Bildzonen werden zur Wischreihe mit Scroll-Snap und Punkten darunter; senkrechtes Scrollen der Seite bleibt frei (touch-action: pan-x pan-y). Ein Tippen auf die Karte öffnet die Produktseite. Im Zweitbild-Modus zeigt das Telefon nur das erste Bild.", "reduzierte_bewegung": "Bilder wechseln sofort ohne Überblenden und ohne Skalierung. Die Wischreihe springt ohne weiches Scrollen.", "barrierefreiheit": "Ein Link je Karte mit dem Produktnamen; Preis und Zustand stehen als Text in der Karte, nicht im Bild. Bild 1 hat einen Alternativtext, weitere Bilder sind aria-hidden, solange sie nicht aktiv sind, oder werden über die Punkte benannt („Bild 2 von 4: Seitenansicht“). Fokus auf der Karte zeigt dasselbe wie Hover. Punkte als Knöpfe mit aria-pressed, Trefferfläche mindestens 24 px." }, "messwerte": { "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen", "dauer_ms": "300 Bild ein, 200 Bild aus, 150 Punkte und Farbe", "stagger_ms": "", "distanz": "Bild 2 scale 1.03 → 1", "sonstiges": "UI-Paar aus token-toggle-asymmetrisch, Rezept optik-hoerakustik-sehen-hoeren (Hover 150, Reiter 300, Schließen 200)", "herkunft": "eigene Festlegung", "quelle": "Rezept optik-hoerakustik-sehen-hoeren" }, "kurve": { "bezier": [ 0.16, 1.0, 0.3, 1.0 ], "css": "cubic-bezier(0.16, 1, 0.3, 1)", "name": "expo.out", "dauer_ms": 300 }, "gesehen_bei": [ { "seite": "Baymard Institute: Product Lists, Display Extra Product Info and Images on Hover", "url": "https://baymard.com/blog/secondary-hover-information", "auszeichnung": "", "beobachtung": "Artikel vom 02.06.2020 (Christian Holst), abgerufen 05.11.2026 über eine Spiegel-Adresse: 28 % der untersuchten Shops zeigen auf Hover zusätzliche Bilder, rund 70 % nutzen den Hover-Zustand gar nicht. Empfehlung: bei visuell geprägter Ware Freisteller und Bild im Einsatz kombinieren, Standardbild einheitlich halten, Grundangaben wie Preis immer sichtbar. Auf Touch keinen Zwischenschritt „Tippen zeigt Hover“.", "art": "artikel" }, { "seite": "Shopware Store: Flip Listing Image (brainstation)", "url": "https://store.shopware.com/en/bst1559241696822m/flip-listing-image-display-second-product-image-on-mouseover.html", "auszeichnung": "", "beobachtung": "Abgerufen 05.11.2026: Erweiterung, die im Listing beim Überfahren ein zweites, je Produkt gewähltes Bild (Rückseite, Detail, Variante) mit Überblendung zeigt. Seit 2020 im Store, letztes Update 02.11.2026. Zeigt, dass der Bildwechsel ein gängiger Shop-Baustein ist; zu Touch steht dort nichts.", "art": "website" } ], "tutorials": [ { "titel": "MDN: scroll-snap-type", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" }, { "titel": "MDN: @media (hover)", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover" } ], "kombinierbar_mit": [ "karte-ganzflaechig-klickbar", "facettenfilter-ergebnisliste", "produkt-kaufbox-varianten", "in-den-warenkorb-flug", "galerie-shared-element-vollbild", "raster-zu-wischreihe" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/", "meta": "https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/meta.json", "demo": "https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/demo" }, "herkunft": { "quelldateien": [ "Recherche Runde 4, 04.11.2026" ], "pruefnotizen": [ "Recherche Runde 4: Awwwards-Einträge mita-eyewear und max-tiber nur als Suchtreffer, ob dort ein Bildwechsel läuft, ist ungeprüft.", "Baymard-Artikel (2020) und Shopware-Erweiterung am 05.11.2026 gelesen. Eine Award-Seite mit beobachtetem Bildwechsel fehlt noch.", "Preisangabe (Gesamtpreis inkl. MwSt., Versandkosten) in der Demo als Beispiel. Vom Kunden prüfen lassen, keine Rechtsberatung." ] }, "bau": { "status": "fertig", "kurz": "Produktkarte, die bei Hover oder Fokus ein zweites Bild zeigt oder mit Bildzonen durch vier Bilder blättert; auf dem Telefon wischbar, Preis inkl. MwSt. und Zustand stehen fest und springen nie.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "cubic-bezier(0.16, 1, 0.3, 1) Bild ein, cubic-bezier(0.7, 0, 0.84, 0) Bild aus (token-toggle-asymmetrisch, Rezept optik-hoerakustik-sehen-hoeren)", "dauer_ms": { "bild_ein": 300, "bild_aus": 200, "punkte": 150, "unterstreichung": 150 }, "distanz": "Bild 2 bis 4 scale 1.03 → 1; Bildname translateY 4 px → 0", "bildflaeche": "aspect-ratio 1, Haarlinie 1 px #D3D6D2, Bilder per grid-area übereinander, nur das aktive opacity 1", "zonen": "Index = floor((x − links) / Breite × Anzahl); Zeiger an der Karte gemessen, weil der Karten-Link darüber liegt; pointerleave → Bild 1", "punkte": "6 px, aktiv 16 × 6 px; Trefferfläche 24 × 28 px; Zonen: Knöpfe mit aria-pressed, ein Tab-Stopp, Pfeile, Pos1, Ende", "touch": "Zweitbild: nur Bild 1, Tippen öffnet; Zonen: scroll-snap-type x mandatory, Punkte folgen dem Scroll", "typo": "Name Bodoni Moda Italic 1.5rem opsz 28; Preis Mona Sans 600 tabular-nums; Maße Fragment Mono .8125rem; Zustand Fragment Mono .6875rem versal .08em", "farben": "#F4F5F3 Grund, #ECEDEA Bild, #E8DED3 Detail, #121417 Text, #5A5F67 leise, #2442A8 nur Termin", "preis": "Endpreis inkl. MwSt. als Text in der Karte, Fassung ohne Gläser im Fußtext, kein Versand", "vorfuehrung": "gedachter Zeiger fährt über alle vier Karten: Zweitbild 1500 ms je Karte, Zonen 620 ms je Bild; Schleife" }, "ausloeser": "hover", "touch": "Zweitbild zeigt auf Touch nur das erste Bild, ein Tippen öffnet die Produktseite (nach Baymard). Bildzonen werden zur waagerechten Wischreihe mit Scroll-Snap; die Punkte folgen, Tippen auf Bild oder Text öffnet. Zwei Karten nebeneinander, unter 360 px eine.", "reduziert": "Bilder wechseln sofort ohne Überblenden und ohne Skalierung, Punkte ohne Übergang; die Wischreihe springt ohne weiches Scrollen.", "korrekturen": {}, "geprueft": "04.11.2026", "notiz": "Welt: Rezept optik-hoerakustik-sehen-hoeren, erfundener Optiker Feinsicht in Schwäbisch Gmünd, vier Fassungen (Remstal Panto Havanna, Rechberg eckig Schwarz matt, Staufen Katzenauge Kristall Rosé, Bargau Titan rund Gold). Alle Bilder sind eigene SVG-Zeichnungen: Vorderansicht, Seitenansicht, Bügel-Detail mit Gravur, drei Farben; Havanna als feTurbulence-Textur. Zustände Neu, Letztes Stück, Nur im Laden in fester Zeile. Abgrenzung: karte-ganzflaechig-klickbar liefert den Block-Link, produkt-kaufbox-varianten wechselt das Bild per Farbwahl auf der Produktseite. Gebaut und geprüft am 05.11.2026 (Runde 4). Selbsturteil 4.", "varianten": [ { "id": "zweitbild", "name": "Zweitbild", "wann": "Mode, Optik, Laden, Möbel: genau ein zweites Bild (Detail oder Einsatz), ruhige Liste ohne Bedienelemente im Bild.", "werte": { "bilder": "2: vorn, Detail", "punkte": "Anzeige ohne Funktion (aria-hidden)", "ausloeser": "pointerenter und Fokus auf dem Link" } }, { "id": "zonen", "name": "Bildzonen", "wann": "Optik, Schuhe, Fahrräder, D2C mit mehreren Ansichten: drei bis vier Bilder, am Desktop per Zeigerposition, am Telefon per Wischen.", "werte": { "bilder": "4: vorn, Seite, Detail, Farben", "punkte": "Knöpfe mit aria-pressed, Pfeiltasten", "bildname": "01 · Vorn unten links, Fragment Mono", "touch": "scroll-snap Wischreihe" } } ] } }