quikcue/taawunu-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Caption: absolute positioning on z-index:5, img absolute fill — definitive fix

Browse Source
This commit is contained in:
Omair Saleh
2026-03-09 03:03:04 +08:00
parent 53f6dc89ac
commit 1d6caab713
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/css/style.css
+17 -11
View File
@@ -455,20 +455,20 @@ p { margin-bottom: 16px; max-width: 720px; }
} }
.story-block.reverse { direction: rtl; } .story-block.reverse { direction: rtl; }
.story-block.reverse > * { direction: ltr; } .story-block.reverse > * { direction: ltr; }
/* story-photo is a grid-within-grid: rows = 1fr (image) + auto (caption) */ /* story-photo: img fills via absolute, caption flows at bottom */
.story-photo { .story-photo {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
overflow: hidden;
position: relative; position: relative;
overflow: hidden;
} }
/* img fills via absolute fill — caption naturally shifts above */
.story-photo img { .story-photo img {
position: absolute;
inset: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.6s; transition: transform 0.6s;
display: block; display: block;
/* minmax(0,1fr) row = definite height → height:100% resolves correctly */
} }
.story-block:hover .story-photo img { .story-block:hover .story-photo img {
transform: scale(1.03); transform: scale(1.03);
@@ -1358,15 +1358,21 @@ p { margin-bottom: 16px; max-width: 720px; }
} }
/* ─── Photo Caption Bar (brand mandatory) ─── */ /* ─── Photo Caption Bar (brand mandatory) ─── */
/* Sub-grid row 2 inside .story-photo — naturally below the img */ /* Absolutely positioned at bottom of .story-photo (img is also absolute, caption z-index wins) */
.story-caption { .story-caption {
background: red !important; position: absolute;
color: white !important; bottom: 0;
left: 0;
right: 0;
z-index: 5;
background: rgba(61,31,21,0.88);
color: rgba(245,239,224,0.85);
font-family: var(--font-body); font-family: var(--font-body);
font-size: 14px !important; font-size: 11px;
padding: 12px 16px !important; font-style: italic;
letter-spacing: 0.01em;
padding: 7px 16px;
line-height: 1.4; line-height: 1.4;
z-index: 99;
} }
/* ─── Community Voice (Caveat) — brand spec: community voices get handwritten treatment ─── */ /* ─── Community Voice (Caveat) — brand spec: community voices get handwritten treatment ─── */
html/index.html
+1 -1
View File
@@ -152,7 +152,7 @@
<section class="story-block fade-up"> <section class="story-block fade-up">
<div class="story-photo"> <div class="story-photo">
<img src="/images/community-planting.jpg" alt="Community members and team planting at the Lolo Farm site, April 2024" loading="lazy"> <img src="/images/community-planting.jpg" alt="Community members and team planting at the Lolo Farm site, April 2024" loading="lazy">
<div class="story-caption" style="background:red;color:white;font-size:16px;padding:12px;display:block;min-height:36px;">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</div> <div class="story-caption">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</div>
</div> </div>
<div class="story-text"> <div class="story-text">
<div class="section-label">Flagship Project</div> <div class="section-label">Flagship Project</div>