oliver/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace per-card product images with shared banner + dropdown selector

Browse Source 
- Removed individual Fine.webp / Lacuoer.jpg from brand cards
- Added shared banner image (asset/banner/1.png) spanning both cards
- Added dropdown selector (Banner 1–9) to switch the displayed image
- Made card backgrounds semi-transparent so the banner shows through
- Added hover zoom effect on the shared banner
- Preserved all brand links, overlays, and content layouts
This commit is contained in:
Oliver
2026-07-01 20:25:15 +00:00
parent c1fe2aa583
commit b1cce5ef5e
3 changed files with 117 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+26 -12
View File
@@ -76,7 +76,15 @@
</p>
<div class="brands-grid" role="list">
<!-- FI-NE -->
<!-- Shared banner image spanning both cards -->
<img
class="brands-banner-img"
id="brands-banner"
src="asset/banner/1.png"
alt="Brand banner"
/>
<!-- FI-NE (left half) -->
<a
class="brand-card brand-card--fine"
href="https://finecosmetic.de"
@@ -89,11 +97,6 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<img
class="brand-card-image"
src="asset/Fine.webp"
alt="[fi-ne] Deodorant Cream Vetiver Geranium product"
/>
<div
class="brand-card-overlay"
aria-hidden="true"
@@ -122,7 +125,7 @@
</div>
</a>
<!-- LACUEOR -->
<!-- LACUEOR (right half) -->
<a
class="brand-card brand-card--lacueor"
href="https://lacueor.com"
@@ -135,11 +138,6 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<img
class="brand-card-image"
src="asset/Lacuoer.jpg"
alt="LACUEOR Staub luxury skincare product on crystal"
/>
<div
class="brand-card-overlay"
aria-hidden="true"
@@ -169,6 +167,22 @@
</a>
</div>
<!-- Banner image selector -->
<div class="banner-selector">
<label for="banner-picker">Banner:</label>
<select id="banner-picker">
<option value="1" selected>Banner 1</option>
<option value="2">Banner 2</option>
<option value="3">Banner 3</option>
<option value="4">Banner 4</option>
<option value="5">Banner 5</option>
<option value="6">Banner 6</option>
<option value="7">Banner 7</option>
<option value="8">Banner 8</option>
<option value="9">Banner 9</option>
</select>
</div>
<p class="brands-notice">
Looking for consumer
products?&nbsp;&nbsp;&#8212;&nbsp;&nbsp; Visit&nbsp;<a
script.js
+14
View File
@@ -34,4 +34,18 @@
},
{ passive: true }
);
/* ── Banner image selector ──────────────────────────────── */
var bannerPicker = document.getElementById("banner-picker");
var bannerImg = document.getElementById("brands-banner");
if (bannerPicker && bannerImg) {
bannerPicker.addEventListener("change", function () {
var val = this.value;
bannerImg.style.opacity = "0";
setTimeout(function () {
bannerImg.src = "asset/banner/" + val + ".png";
bannerImg.style.opacity = "1";
}, 200);
});
}
})();
style.css
+77 -26
View File
@@ -377,11 +377,30 @@ body::before {
}
.brands-grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1200px;
margin: 0 auto;
min-height: 560px;
overflow: hidden;
}
/* Shared banner image behind both brand cards */
.brands-banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.brands-grid:hover .brands-banner-img {
transform: scale(1.04);
}
.brand-card {
@@ -397,36 +416,16 @@ body::before {
}
.brand-card--fine {
background: var(--fine-beige);
position: relative;
z-index: 1;
background: rgba(232, 224, 208, 0.82);
border-right: 1px solid var(--border);
}
.brand-card--lacueor {
background: var(--lacueor-dark);
}
.brand-card-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
opacity: 0.55;
}
.brand-card--fine .brand-card-image {
opacity: 0.45;
object-position: center 30%;
}
.brand-card--lacueor .brand-card-image {
opacity: 0.5;
}
.brand-card:hover .brand-card-image {
transform: scale(1.04);
position: relative;
z-index: 1;
background: rgba(26, 24, 20, 0.78);
}
.brand-card-overlay {
@@ -965,6 +964,49 @@ footer {
letter-spacing: 0.08em;
}
/* ============================================================
BANNER SELECTOR
============================================================ */
.banner-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 48px;
background: var(--cream);
border-bottom: 1px solid var(--border);
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--mid-grey);
}
.banner-selector label {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--gold);
}
.banner-selector select {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.06em;
padding: 8px 16px;
border: 1px solid var(--border);
background: var(--warm-white);
color: var(--charcoal);
cursor: pointer;
outline: none;
transition: border-color var(--transition);
min-width: 130px;
}
.banner-selector select:hover,
.banner-selector select:focus {
border-color: var(--gold);
}
/* ============================================================
RESPONSIVE
============================================================ */
@@ -1046,6 +1088,15 @@ footer {
padding: 36px 28px;
}
.brands-grid {
min-height: 360px;
}
.banner-selector {
padding: 16px 20px;
flex-wrap: wrap;
}
.values-grid {
grid-template-columns: 1fr;
}