max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix hero image gap: scale via Framer Motion instead of a Tailwind class

Browse source 
The scale-110 utility set the same CSS transform property that Framer
Motion's y-parallax already controlled inline, silently canceling the
scale. The image never actually zoomed in, so the parallax shift had no
overflow buffer and exposed a bare strip at the bottom of the hero.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 22:46:35 +02:00
parent 075a3d88fe
commit 76b9fe35cc
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
hifi-src/src/pages/public/Home.jsx
View file

@ -97,10 +97,10 @@ export default function Home() {
<section ref={heroRef} className="relative -mt-[89px] h-dvh min-h-[560px] overflow-hidden sm:-mt-[97px]"> <section ref={heroRef} className="relative -mt-[89px] h-dvh min-h-[560px] overflow-hidden sm:-mt-[97px]">
<motion.img <motion.img
style={{ y: heroImageY }} style={{ y: heroImageY, scale: 1.15 }}
src={heroImage} src={heroImage}
alt={t('home.heroImageAlt')} alt={t('home.heroImageAlt')}
className="absolute inset-0 h-full w-full scale-110 object-cover" className="absolute inset-0 h-full w-full object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/80 to-neutral-950/40" /> <div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/80 to-neutral-950/40" />