[object Object]

← back to Thesetdecorator

card grid: universal hover-preview — stamp --card-bg on card-img inline + ::after 3x3 tile-repeat shows seamless structure on hover. Matches wallco-ai pattern (reference: wallco-ai/public/css/site.css:347-385).

6204dd34b88edd1ff2f5cae0576b2923f769c6bf · 2026-05-28 10:55:33 -0700 · SteveStudio2

- public/vintage.html (it.image_url)
- public/wall-treatments.html (o.image_url)
- public/sdsa.html (it.headshot_url)
- public/css/main.css — new .card-img:not(.video)::after rule; .video excluded so it keeps its play-arrow ::after.

Files touched

Diff

commit 6204dd34b88edd1ff2f5cae0576b2923f769c6bf
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Thu May 28 10:55:33 2026 -0700

    card grid: universal hover-preview — stamp --card-bg on card-img inline + ::after 3x3 tile-repeat shows seamless structure on hover. Matches wallco-ai pattern (reference: wallco-ai/public/css/site.css:347-385).
    
    - public/vintage.html (it.image_url)
    - public/wall-treatments.html (o.image_url)
    - public/sdsa.html (it.headshot_url)
    - public/css/main.css — new .card-img:not(.video)::after rule; .video excluded so it keeps its play-arrow ::after.
---
 public/css/main.css         | 6 ++++++
 public/sdsa.html            | 2 +-
 public/vintage.html         | 2 +-
 public/wall-treatments.html | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 0afc43e..9b68466 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -286,6 +286,12 @@ body:has(> .site-header.over-hero) { padding-top: 0; }
 .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .card-img { aspect-ratio: 4 / 5; background: #1a1a1a center/cover no-repeat; position: relative; overflow: hidden; }
 .card-img.video { aspect-ratio: 16 / 9; }
+/* Universal hover-preview: 3x3 tile-repeat of the same image reveals seamless-pattern structure.
+   Excludes .video (which already uses ::after for the play arrow). Matches wallco-ai pattern
+   (reference: wallco-ai/public/css/site.css:347-385). */
+.card-img:not(.video)::after{content:"";position:absolute;inset:0;background-image:var(--card-bg,none);background-repeat:repeat;background-size:33.33% 33.33%;background-position:center;opacity:0;transition:opacity 360ms ease;pointer-events:none}
+.card:hover .card-img:not(.video)::after,.design-card:hover .card-img:not(.video)::after,.card-link:focus-visible .card-img:not(.video)::after{opacity:1}
+@media (prefers-reduced-motion: reduce){.card-img:not(.video)::after{transition:none}}
 .card-source-badge {
   position: absolute; bottom: 8px; left: 8px; z-index: 2;
   padding: 2px 7px; border-radius: 4px;
diff --git a/public/sdsa.html b/public/sdsa.html
index 19d752f..f578b0a 100644
--- a/public/sdsa.html
+++ b/public/sdsa.html
@@ -138,7 +138,7 @@
         ? `<span class="canon-pill" title="${c.noms} noms / ${c.wins} wins" style="display:inline-block;background:${c.rank<=10?'linear-gradient(135deg,#FAEB86,#c9a96e)':(c.rank<=25?'#c9a96e':'rgba(201,169,110,0.18)')};color:${c.rank<=25?'#1a1a1a':'#c9a96e'};padding:2px 8px;border-radius:3px;font:9px/1.4 var(--font-ui);font-weight:700;letter-spacing:.1em;margin-left:6px">★ NO. ${c.rank}</span>`
         : '';
       return `<a class="card" data-slug="${it.slug}" href="#" aria-label="${escapeHtml(it.full_name)}">
-        <div class="card-img" style="background-image:url('${escapeHtml(it.headshot_url || '')}');background-color:#222"></div>
+        <div class="card-img" style="background-image:url('${escapeHtml(it.headshot_url || '')}');--card-bg:url('${escapeHtml(it.headshot_url || '')}');background-color:#222"></div>
         <div class="card-body">
           <h3>${escapeHtml(it.full_name)}${canonBadge}</h3>
           <p>${escapeHtml((it.title_credits||[]).join(' · '))}</p>
diff --git a/public/vintage.html b/public/vintage.html
index 5d2fb50..32121a9 100644
--- a/public/vintage.html
+++ b/public/vintage.html
@@ -179,7 +179,7 @@
 
     function card(it){
       return `<a class="card" href="${escapeHtml(it.source_url)}" target="_blank" rel="noopener noreferrer">
-        <div class="card-img" style="background-image:url('${escapeHtml(it.image_url || '')}');background-color:#222"></div>
+        <div class="card-img" style="background-image:url('${escapeHtml(it.image_url || '')}');--card-bg:url('${escapeHtml(it.image_url || '')}');background-color:#222"></div>
         <div class="card-body">
           <h3>${escapeHtml(it.title)}</h3>
           <p>${escapeHtml(it.price_usd != null ? '$' + it.price_usd : '')} ${escapeHtml(it.condition || '')}</p>
diff --git a/public/wall-treatments.html b/public/wall-treatments.html
index 7c4213b..b11fe45 100644
--- a/public/wall-treatments.html
+++ b/public/wall-treatments.html
@@ -86,7 +86,7 @@
       const dirLabel = o.direction === 'ltr' ? 'Left → Right' : 'Right → Left';
       const swatches = (o.palette || []).map(c => `<span style="width:18px;height:18px;background:${escapeHtml(c)};border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,0.1)"></span>`).join('');
       return `<a class="card" data-id="${o.id}" href="#" aria-label="${escapeHtml(o.title)}">
-        <div class="card-img" style="aspect-ratio:16/9;background-image:url('${o.image_url}');background-size:cover"></div>
+        <div class="card-img" style="aspect-ratio:16/9;background-image:url('${o.image_url}');--card-bg:url('${o.image_url}');background-size:cover"></div>
         <div class="card-body">
           <h3>${escapeHtml(o.title)}</h3>
           <p>${dirLabel}</p>

← 4f323a7 fix(awards-harvest): wire filmTarget into nominee dedup  ·  back to Thesetdecorator  ·  card grid: universal hover-preview — stamp --card-bg on card d6aa8df →