התמונה גדלה בתוך המסגרת החתוכה. הקלאסיקה שכל גלריה צריכה.
מתי משתמשים: כרטיסי בלוג, גלריות, קטגוריות חנות.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}
/* CSS16 · זום פנימי בהובר */
.zoomc{width:min(380px,80vw);margin-inline:auto;border-radius:var(--r, 14px);overflow:hidden;cursor:pointer}
.zoomc .ph{aspect-ratio:16/10;font-size:19px;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.zoomc:hover .ph{transform:scale(1.07)}<div class="stage tight"><div class="zoomc"><div class="ph ph-c"><span class="ph-l">התמונה גדלה בפנים</span></div></div></div>