homepage cards: 'second position' room-setting inset chip — when a design has photoreal rooms, layers a corner thumbnail (~42% wide, bottom-right, rounded shadow) inside the .card-img + 'In a room' badge that fades in on hover. Pointer-events:none so clicks fall through to the parent design link.

fa813e7dc79f8320f5bbbf6039ab0b6bec14e7e0 · 2026-05-28 11:10:15 -0700 · Steve Abrams

Files touched

M server.js

Diff

commit fa813e7dc79f8320f5bbbf6039ab0b6bec14e7e0
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu May 28 11:10:15 2026 -0700

    homepage cards: 'second position' room-setting inset chip — when a design has photoreal rooms, layers a corner thumbnail (~42% wide, bottom-right, rounded shadow) inside the .card-img + 'In a room' badge that fades in on hover. Pointer-events:none so clicks fall through to the parent design link.
---
 server.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/server.js b/server.js
index 699ed1b..5f463f0 100644
--- a/server.js
+++ b/server.js
@@ -6203,6 +6203,34 @@ ${(req.query.source === 'all') ? `
       }
       .design-card:hover .card-hover,
       .design-card:focus-within .card-hover { opacity:1 }
+      /* Second-position room-setting image — when a design has a photoreal
+         room render, layer it as a corner thumbnail INSIDE the card so the
+         visitor sees the pattern AND a room scene without leaving the grid.
+         Steve directive 2026-05-28: "in second position, show the room
+         setting image on chips". Bottom-right inset (~42% wide, square),
+         rounded with a subtle shadow so it reads as a stacked secondary chip
+         rather than a watermark. Grows slightly on hover. */
+      .design-card .card-img .card-room {
+        position:absolute; right:8px; bottom:8px; width:42%; aspect-ratio:1;
+        object-fit:cover; border-radius:6px; z-index:3;
+        box-shadow:0 4px 14px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.5);
+        transition:transform .2s ease, box-shadow .2s ease;
+        pointer-events:none;       /* clicks fall through to parent <a> */
+      }
+      .design-card:hover .card-room {
+        transform:scale(1.06); box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.7);
+      }
+      .design-card .card-img .card-room-badge {
+        position:absolute; right:14px; bottom:calc(42% + 14px); z-index:4;
+        padding:3px 8px; border-radius:999px;
+        background:rgba(15,12,8,.78); color:#fff;
+        font:700 9px/1 var(--sans,system-ui); letter-spacing:.10em; text-transform:uppercase;
+        backdrop-filter:blur(4px); pointer-events:none;
+        opacity:0; transition:opacity .18s ease;
+      }
+      .design-card:hover .card-room-badge,
+      .design-card:focus-within .card-room-badge { opacity:1 }
+      @media (hover: none) { .card-room-badge { opacity:1 } }    /* mobile: always show the label */
       .card-hover-dig {
         position:absolute; top:10px; left:50%; transform:translateX(-50%);
         background:rgba(255,255,255,.92); color:#111;

← 223088a /designs grid bulk-action: scrub URL creds on fetch — same f · back to Wallco Ai · homepage hero: room slides render at FULL SCALE — hero-slide 48ecb0c →