/* ========================================================================= Glass Reflection — Portable Image Reflection Component v1.0 | Zero dependencies | Drop into any project ========================================================================= Creates a mirror / glass reflection effect beneath any image. HTML STRUCTURE ──────────────
Description
CUSTOM PROPERTIES (set on .glass-reflection or any ancestor) ───────────────────────────────────────────────────────────── --gr-ratio Source image aspect ratio as a single number 16:10 → 1.6 | 16:9 → 1.778 | 4:3 → 1.333 3:4 → 0.75 | 1:1 → 1 Default: 1.6 --gr-height Reflection height as a fraction of the source 0.5 = half | 0.33 = one-third | 1 = full Default: 0.5 --gr-radius Border radius on the source image Default: 20px --gr-mirror-radius Border radius on the top corners of the reflection Default: 15px --gr-gap Space between source image and reflection Default: 5px --gr-fade-start Opacity at the top of the reflection (0–1) Default: 0.6 --gr-zoom Hover zoom scale (set to 1 to disable) Default: 1.045 --gr-speed Hover transition duration Default: 0.9s --gr-easing Hover transition easing curve Default: cubic-bezier(0.16, 1, 0.3, 1) --gr-shadow Box-shadow on the source image Set to "none" to remove Default: subtle neutral ring + drop shadow --gr-mobile-height Reflection height fraction on ≤ 768 px screens Default: 0.3 EXAMPLES ──────── Landscape 16:10 (default) → (no overrides needed) Landscape 16:9 → style="--gr-ratio: 1.778;" Portrait 3:4 → style="--gr-ratio: 0.75;" Square → style="--gr-ratio: 1;" Shorter reflection → style="--gr-ratio: 1.6; --gr-height: 0.3;" No hover zoom → style="--gr-zoom: 1;" No shadow → style="--gr-shadow: none;" Custom shadow → style="--gr-shadow: 0 8px 30px rgba(0,0,0,.2);" ========================================================================= */ /* ---- Container ---- */ .glass-reflection { /* Private tokens resolved from public custom properties */ --_ratio: var(--gr-ratio, 1.6); --_height: var(--gr-height, 0.2); --_radius: var(--gr-radius, 20px); --_mirror-radius: var(--gr-mirror-radius, 15px); --_gap: var(--gr-gap, 5px); --_fade-start: var(--gr-fade-start, 0.6); --_zoom: var(--gr-zoom, 1); --_speed: var(--gr-speed, 0.9s); --_easing: var(--gr-easing, cubic-bezier(0.16, 1, 0.3, 1)); display: flex; flex-direction: column; } /* ---- Source Image ---- */ .glass-reflection__source { position: relative; aspect-ratio: var(--_ratio); overflow: hidden; border-radius: var(--_radius); line-height: 0; box-shadow: var(--gr-shadow, 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 4px rgba(255, 255, 255, 0.35), 0 0 0 5px rgba(0, 0, 0, 0.03), 0 20px 50px rgba(0, 0, 0, 0.10) ); } .glass-reflection__source img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--_speed) var(--_easing); } /* ---- Reflection Container (clips to fractional height) ---- */ .glass-reflection__mirror { width: 100%; aspect-ratio: calc(var(--_ratio) / var(--_height)); overflow: hidden; border-radius: var(--_mirror-radius) var(--_mirror-radius) 0 0; flex-shrink: 0; margin-top: var(--_gap); -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, var(--_fade-start)) 0%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, var(--_fade-start)) 0%, rgba(0, 0, 0, 0) 100% ); } /* ---- Flipped Frame (renders image at source aspect ratio, inverted) ---- */ .glass-reflection__flip { width: 100%; aspect-ratio: var(--_ratio); overflow: hidden; transform: scaleY(-1); transition: transform var(--_speed) var(--_easing); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .glass-reflection__flip img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================= Reflection Variants ========================================================================= Add ONE modifier class to .glass-reflection to change the reflection style: CLASS EFFECT ───────────────────────────── ──────────────────────────────────── (none / default) Standard mirror reflection .glass-reflection--ripple Water / pond ripple distortion .glass-reflection--perspective Outward-tapering perspective .glass-reflection--skew Left-leaning skew VARIANT CUSTOM PROPERTIES ───────────────────────────────────────────────────────────────────── --gr-ripple-blur Blur intensity for ripple Default: 1.5px --gr-ripple-speed Animation cycle duration Default: 4s --gr-persp-depth Perspective depth (lower = more) Default: 800px --gr-persp-tilt X-axis tilt angle Default: 4deg --gr-skew-angle Skew angle (negative = left) Default: -8deg USAGE ───── Per-element:
Adjust: style="--gr-ripple-blur: 2px; --gr-ripple-speed: 3s;" ========================================================================= */ /* ── 1. Ripple — water / pond surface ──────────────────────────────── */ .glass-reflection--ripple .glass-reflection__flip { filter: blur(var(--gr-ripple-blur, 1.5px)); animation: gr-ripple var(--gr-ripple-speed, 4s) ease-in-out infinite; } @keyframes gr-ripple { 0%, 100% { transform: scaleY(-1) scaleX(1); } 25% { transform: scaleY(-1.01) scaleX(1.008) translateX(-0.5px); } 50% { transform: scaleY(-0.995) scaleX(0.996) translateX(0.8px); } 75% { transform: scaleY(-1.005) scaleX(1.004) translateX(-0.3px); } } /* ── 2. Perspective — outward taper ────────────────────────────────── */ .glass-reflection--perspective .glass-reflection__mirror { transform: perspective(var(--gr-persp-depth, 800px)) rotateX(var(--gr-persp-tilt, 4deg)); transform-origin: center top; } /* ── 3. Skew — left-leaning reflection ─────────────────────────────── */ .glass-reflection--skew .glass-reflection__flip { transform: scaleY(-1) skewX(var(--gr-skew-angle, -8deg)); transform-origin: center top; } /* ── GLOBAL VARIANT TOGGLE ───────────────────────────────────────────── To apply ONE variant to ALL .glass-reflection elements site-wide, uncomment the desired block below. Leave all commented for default. ──────────────────────────────────────────────────────────────────── */ /* --- Ripple (uncomment to enable globally) --- .glass-reflection .glass-reflection__flip { filter: blur(var(--gr-ripple-blur, 1.5px)); animation: gr-ripple var(--gr-ripple-speed, 4s) ease-in-out infinite; } */ /* --- Perspective (uncomment to enable globally) --- .glass-reflection .glass-reflection__mirror { transform: perspective(var(--gr-persp-depth, 800px)) rotateX(var(--gr-persp-tilt, 4deg)); transform-origin: center top; } */ /* --- Skew (uncomment to enable globally) --- .glass-reflection .glass-reflection__flip { transform: scaleY(-1) skewX(var(--gr-skew-angle, -8deg)); transform-origin: center top; } */ /* ---- Mobile — shorter reflection ---- */ @media (max-width: 768px) { .glass-reflection { --_height: var(--gr-mobile-height, 0.2); } }