{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bild-zoom-in-maske",
 "name": "Bild-Zoom in der Maske",
 "name_en": "Image zoom inside mask / inner scale / clip reveal hover",
 "kurz": "Der Rahmen steht, das Bild darin zoomt langsam: drei Varianten in drei Rezept-Welten, vom ruhigen 1.05-Zoom im Projektraster über den schrumpfenden Rahmen bei Hotelzimmern bis zur farbigen Decke im Kulturprogramm.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 4,
 "stimmung": [
  "ruhig",
  "editorial",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "ruhig",
  "luxuriös",
  "editorial"
 ],
 "technik": [
  "css",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das Bild liegt in einem Rahmen mit overflow: hidden oder clip-path. Beim Hover bewegt sich nur das Bild darin: Es zoomt leicht von 1 auf 1.05 bis 1.1. In Varianten zieht sich der Rahmen gleichzeitig zusammen, oder eine zweite Ebene öffnet sich per clip-path und das Bild darin zoomt von 1.5 auf 1 zurück. Langsame, weiche Kurven von 0,75 bis 1,2 s erzeugen den Eindruck einer Kamerafahrt.",
  "warum_es_wirkt": "Die Bewegung bleibt im Bild, der Rahmen und das Layout stehen still. Das wirkt ruhig, hochwertig und filmisch. Der Effekt ist ein klassischer Qualitätsmarker in Projekt- und Artikelrastern.",
  "wann_einsetzen": "Bildraster, Projektkarten, Blog-Teaser, Produktkacheln. Fast überall, wo ein Bild auf eine Unterseite führt.",
  "wann_nicht": "Bei Logos oder Illustrationen, die bis an den Rand gehen: Der Zoom schneidet sie an. Nicht auf Bildern, die schon eine Scroll-Parallaxe haben, sonst kollidieren die Transforms.",
  "varianten": [
   "Basis: Bild 1 → 1.05, Rahmen bleibt (Cuberto: 1,2 s expo.out).",
   "Gegenläufig: Rahmen zieht sich per clip-path inset auf 4 % zusammen, Bild zoomt auf 1.12 (Nachbau des DDD-Hotel-Hovers, Codrops BackgroundScaleHoverEffect).",
   "Richtung: Eine zweite Ebene öffnet sich per clip-path von der Eintrittsseite, das Bild darin zoomt von 1.5 auf 1 (Codrops HoverGrid, 0,95 s power4).",
   "Zweites Bild wird per clip-path über dem ersten enthüllt (Codrops DoubleImageHoverEffects).",
   "Innerer Wrapper mit overflow: hidden, damit das Bild auch während eines Reveals skaliert (Codrops RapidImageHoverMenu)."
  ],
  "umsetzung": ".media { overflow: hidden; border-radius: var(--r); } .media img { scale: 1.001; transition: scale 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .card:is(:hover, :focus-within) .media img { scale: 1.05; }. Gegenläufig: .media { clip-path: inset(0 round var(--r)); transition: clip-path 1.2s var(--ease); } .card:hover .media { clip-path: inset(4% round var(--r)); } .card:hover img { scale: 1.12; }. Richtung: per JS die Kante bestimmen, die dem Zeiger am nächsten liegt, clip-path ohne Transition auf diese Kante setzen, dann mit Transition auf inset(0) öffnen; beim Verlassen zur Austrittskante schließen. Hover-Absicht: 30 ms Verzögerung (setTimeout) gegen Streif-Hover in Rastern. Effekt nur unter (hover: hover) and (pointer: fine). scale statt transform verwenden, damit andere Transforms nicht kollidieren. Das Bild in Ruhe minimal überskalieren (1.001), damit keine Subpixel-Kanten blitzen.",
  "mobil": "Auf Touch kein Hover-Zoom. Stattdessen zoomt das Bild einmal leicht beim Scroll-Eintritt, zum Beispiel von 1.08 auf 1.",
  "reduzierte_bewegung": "Kein Zoom und kein Clip-Path. Hover und Fokus wechseln nur Helligkeit oder Overlay, kurz und linear.",
  "barrierefreiheit": "Den Effekt auch bei :focus-within auslösen. Der Alt-Text des Bildes bleibt unverändert. Eine zusätzliche Ebene wie die Decke mit aria-hidden versehen und ihr Bild mit leerem Alt."
 },
 "messwerte": {
  "easing": "cubic-bezier(.16,1,.3,1) (Cuberto); cubic-bezier(.4,0,.1,1) (Mont-Fort); cubic-bezier(0.65,0.05,0,1) (Lando)",
  "dauer_ms": "1200 / 900 / 750",
  "stagger_ms": "",
  "distanz": "scale 1 → 1.05 (Cuberto), 1.07 (Clay), 1.1 (Lando)",
  "sonstiges": "Effekt meist an (hover:hover) and (pointer:fine) gebunden",
  "herkunft": "beobachtet",
  "quelle": "https://cuberto.com/ ; https://www.mont-fort.com/_astro/_slug_.CRG2uH_C.css ; https://www.landonorris.com/"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops HoverGrid (Repo)",
   "url": "https://github.com/codrops/HoverGrid",
   "auszeichnung": "",
   "beobachtung": "Code: clip-path aus Richtungs-Attribut, inneres Bild scale 1.5 → 1, duration 0.95 power4, Hover-Delay 30 ms gegen versehentliches Auslösen.",
   "art": "demo"
  },
  {
   "seite": "Codrops BackgroundScaleHoverEffect (Repo)",
   "url": "https://github.com/codrops/BackgroundScaleHoverEffect",
   "auszeichnung": "",
   "beobachtung": "Nachbau des Hintergrund-Skalierungs-Hovers der DDD-Hotel-Website mit CSS clip-path.",
   "art": "demo"
  },
  {
   "seite": "Codrops DoubleImageHoverEffects (Repo)",
   "url": "https://github.com/codrops/DoubleImageHoverEffects",
   "auszeichnung": "",
   "beobachtung": "Hover, die dasselbe Bild per clip-path enthüllen.",
   "art": "demo"
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Projektkarten: .Card .preview__media img/video transition transform 1.2s cubic-bezier(.16,1,.3,1); :hover scale(1.05).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Mont-Fort",
   "url": "https://www.mont-fort.com/",
   "auszeichnung": "",
   "beobachtung": "Artikel-Liste: .article-item:hover .img-container img, transition transform .9s cubic-bezier(.4,0,.1,1), nur (hover:hover) and (pointer:fine).",
   "art": "website"
  },
  {
   "seite": "Lando Norris",
   "url": "https://www.landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Helm-Raster: .helmet-grid-item-w:hover .helmet-grid-item-img-helmet scale(1.1) mit var(--animation-default) = 0.75s cubic-bezier(0.65,0.05,0,1).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Clay",
   "url": "https://clay.global/",
   "auszeichnung": "",
   "beobachtung": "ArticlesGridItem:hover Bild scale(1.07), transition-duration .75s (ab 1250 px).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops BackgroundScaleHoverEffect (Repo)",
   "url": "https://github.com/codrops/BackgroundScaleHoverEffect"
  }
 ],
 "kombinierbar_mit": [
  "graustufen-zu-farbe",
  "webgl-bildverzerrung",
  "kontextueller-cursor"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/",
  "meta": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 4 Produktionsbelege; reale Werte langsamer und kleiner als Codrops-Demo."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Rahmen steht, das Bild darin zoomt langsam: drei Varianten in drei Rezept-Welten, vom ruhigen 1.05-Zoom im Projektraster über den schrumpfenden Rahmen bei Hotelzimmern bis zur farbigen Decke im Kulturprogramm.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "basis": {
    "scale": "1.001 → 1.05",
    "dauer_ms": 1200,
    "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
    "eigenschaft": "scale (nicht transform)"
   },
   "gegenlaeufig": {
    "clip_path": "inset(0 round 4px) → inset(4% round 4px)",
    "scale": "1.001 → 1.12",
    "dauer_ms": 1200,
    "easing": "cubic-bezier(0.16, 1, 0.3, 1)"
   },
   "richtung": {
    "clip_path_start": "inset von der nächstgelegenen Kante (z. B. links: inset(0 100% 0 0)) → inset(0 0 0 0)",
    "scale": "1.5 → 1",
    "dauer_ms": 950,
    "easing": "cubic-bezier(0.22, 1, 0.36, 1) (power4.out)",
    "decke_filter": "saturate(.8) brightness(.42)"
   },
   "hover_absicht_ms": 30,
   "ueberskalierung_ruhe": 1.001,
   "titel_versatz": "0.3em, 600 ms, cubic-bezier(0.16, 1, 0.3, 1)",
   "radius_px": 4,
   "seitenverhaeltnis": "4 / 5",
   "touch_eintritt": {
    "scale": "1.08 → 1.001",
    "dauer_ms": 1200,
    "schwelle": 0.3
   },
   "reduziert": {
    "filter": "brightness(1) → brightness(.82)",
    "dauer_ms": 150,
    "easing": "linear"
   },
   "nur_bei": "(hover: hover) and (pointer: fine), pointerType mouse"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover-Zoom. Jede Karte zoomt einmal beim Scroll-Eintritt von 1.08 auf 1 (IntersectionObserver, Schwelle 0.3). Gegenläufig ohne schrumpfenden Rahmen, Richtung ohne Decke; Datum und Sparte stehen dort immer sichtbar an der Karte.",
  "reduziert": "Kein Zoom, kein Clip-Path, keine Decke. Hover und Fokus dunkeln das Bild in 150 ms auf brightness(.82) ab und unterstreichen den Titel.",
  "korrekturen": {
   "beschreibung": "Das Bild liegt in einem Rahmen mit overflow: hidden oder clip-path. Beim Hover bewegt sich nur das Bild darin: Es zoomt leicht von 1 auf 1.05 bis 1.1. In Varianten zieht sich der Rahmen gleichzeitig zusammen, oder eine zweite Ebene öffnet sich per clip-path und das Bild darin zoomt von 1.5 auf 1 zurück. Langsame, weiche Kurven von 0,75 bis 1,2 s erzeugen den Eindruck einer Kamerafahrt.",
   "warum_es_wirkt": "Die Bewegung bleibt im Bild, der Rahmen und das Layout stehen still. Das wirkt ruhig, hochwertig und filmisch. Der Effekt ist ein klassischer Qualitätsmarker in Projekt- und Artikelrastern.",
   "wann_einsetzen": "Bildraster, Projektkarten, Blog-Teaser, Produktkacheln. Fast überall, wo ein Bild auf eine Unterseite führt.",
   "wann_nicht": "Bei Logos oder Illustrationen, die bis an den Rand gehen: Der Zoom schneidet sie an. Nicht auf Bildern, die schon eine Scroll-Parallaxe haben, sonst kollidieren die Transforms.",
   "varianten": [
    "Basis: Bild 1 → 1.05, Rahmen bleibt (Cuberto: 1,2 s expo.out).",
    "Gegenläufig: Rahmen zieht sich per clip-path inset auf 4 % zusammen, Bild zoomt auf 1.12 (Nachbau des DDD-Hotel-Hovers, Codrops BackgroundScaleHoverEffect).",
    "Richtung: Eine zweite Ebene öffnet sich per clip-path von der Eintrittsseite, das Bild darin zoomt von 1.5 auf 1 (Codrops HoverGrid, 0,95 s power4).",
    "Zweites Bild wird per clip-path über dem ersten enthüllt (Codrops DoubleImageHoverEffects).",
    "Innerer Wrapper mit overflow: hidden, damit das Bild auch während eines Reveals skaliert (Codrops RapidImageHoverMenu)."
   ],
   "umsetzung": ".media { overflow: hidden; border-radius: var(--r); } .media img { scale: 1.001; transition: scale 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .card:is(:hover, :focus-within) .media img { scale: 1.05; }. Gegenläufig: .media { clip-path: inset(0 round var(--r)); transition: clip-path 1.2s var(--ease); } .card:hover .media { clip-path: inset(4% round var(--r)); } .card:hover img { scale: 1.12; }. Richtung: per JS die Kante bestimmen, die dem Zeiger am nächsten liegt, clip-path ohne Transition auf diese Kante setzen, dann mit Transition auf inset(0) öffnen; beim Verlassen zur Austrittskante schließen. Hover-Absicht: 30 ms Verzögerung (setTimeout) gegen Streif-Hover in Rastern. Effekt nur unter (hover: hover) and (pointer: fine). scale statt transform verwenden, damit andere Transforms nicht kollidieren. Das Bild in Ruhe minimal überskalieren (1.001), damit keine Subpixel-Kanten blitzen.",
   "mobil": "Auf Touch kein Hover-Zoom. Stattdessen zoomt das Bild einmal leicht beim Scroll-Eintritt, zum Beispiel von 1.08 auf 1.",
   "reduzierte_bewegung": "Kein Zoom und kein Clip-Path. Hover und Fokus wechseln nur Helligkeit oder Overlay, kurz und linear.",
   "barrierefreiheit": "Den Effekt auch bei :focus-within auslösen. Der Alt-Text des Bildes bleibt unverändert. Eine zusätzliche Ebene wie die Decke mit aria-hidden versehen und ihr Bild mit leerem Alt."
  },
  "geprueft": "02.11.2026",
  "notiz": "Drei Varianten in drei Rezept-Welten, jede mit eigenem Aufbau: Basis als Projektraster des erfundenen Kölner Ateliers Hollerbach (3 Karten 4:5), Gegenläufig als Zimmerübersicht des erfundenen Hotel Lärchenhof (ein großes Motiv über zwei Zeilen, zwei kleine 2:1, Newsreader und Mona Sans), Richtung als Monatsprogramm der erfundenen Gleishalle (4 quadratische Kacheln, Decke in der Spartenfarbe mit Uhrzeit, Preis und Aktion, Schibsted Grotesk und IBM Plex Mono). Reines CSS plus wenig JS (Hover-Absicht, Eintrittskante). Varianten 01.11.2026: Umschalter im Pult (fest unten rechts, data-fundus-pult), Variante in der URL (?v=); die Vorführung fährt mit gezeichnetem Zeiger nur über die Karten der gewählten Variante statt pro Runde zu wechseln. Frühere Portfolio-Bilder zuerst durch zehn selbst gezeichnete SVG-Bilder (medien/bild-zoom-in-maske-*.svg) ersetzt. 02.11.2026: Basis und Gegenläufig zeigen jetzt die gerenderten Bilder keramik-stillleben, beton-treppe, flakon (Atelier) und fenster-licht, stoff-stapel, huegel-nebel (Hotel Lärchenhof), Nebelflakon heißt dort Ambraflakon; Richtung (Gleishalle) behält die vier SVG-Plakate, weil kein gerendertes Motiv zu Musik, Theater und Film passt. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .56 → .66 (5,5:1); Knopf-Rahmen im Kontrastmodus.",
  "varianten": [
   {
    "id": "basis",
    "name": "Basis: nur das Bild zoomt",
    "wann": "Projekt- und Artikelraster, Produktkacheln, Blog-Teaser: überall, wo ein Bild auf eine Unterseite führt und Ruhe wichtiger ist als Effekt.",
    "werte": {
     "rezept": "kreativstudio-buehne",
     "scale": "1.001 → 1.05",
     "dauer_ms": 1200,
     "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
     "rahmen": "4:5, radius 4px, steht still",
     "raster": "3 Spalten",
     "titel_versatz": "0.3em, 600 ms"
    }
   },
   {
    "id": "gegen",
    "name": "Rahmen schrumpft, Bild zoomt gegenläufig",
    "wann": "Hotel, Gastro, Immobilien und Mode mit wenigen großen Bildern: die Kamerafahrt in den Raum, ein großes und zwei kleine Motive.",
    "werte": {
     "rezept": "boutique-hotel-gastgeber",
     "clip_path": "inset(0 round 2px) → inset(4% round 2px)",
     "scale": "1.001 → 1.12",
     "dauer_ms": 1200,
     "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
     "raster": "7fr und 4fr: ein großes Motiv über zwei Zeilen, rechts zwei 16:10",
     "schrift": "Newsreader und Mona Sans",
     "link_farbe": "Holzton #6e5a47 → Text #3e3a37, 400 ms cubic-bezier(0.37, 0, 0.63, 1)"
    }
   },
   {
    "id": "richtung",
    "name": "Richtungsabhängiger Clip mit farbiger Decke",
    "wann": "Programme, Kataloge und Kursübersichten mit Kategorien, etwa Kultur, Kurs oder Verein: die Decke trägt die Spartenfarbe und zeigt Uhrzeit, Preis und Aktion.",
    "werte": {
     "rezept": "kultur-programm-haltung",
     "clip_path_start": "inset von der nächstgelegenen Kante (z. B. links inset(0 100% 0 0)) → inset(0)",
     "scale": "1.5 → 1",
     "dauer_ms": 950,
     "easing": "cubic-bezier(0.22, 1, 0.36, 1) (power4.out)",
     "decke": "Hintergrund Spartenfarbe, Bild grayscale(1) contrast(1.15), mix-blend-mode multiply, Deckkraft .85",
     "sparten": "Musik #c4421a, Theater #3d5f9a, Kunst #2f7d4a, Film #b0186b",
     "raster": "4 Spalten, 1:1, Ecken 0; unter 900 px 2 Spalten",
     "schrift": "Schibsted Grotesk und IBM Plex Mono"
    }
   }
  ]
 }
}