I'm trying to build a UI where a large heading partially reveals an image inside the text while the remaining part of the image stays visible normally below the text.
Layout idea:
Top section contains large typography
Bottom section contains the main image
Only the overlapping portion of the image should appear inside the text
Text should still preserve its base color
Need this effect using CSS/Tailwind in React
I'll upload:
reference UI
my current implementation
current output/problem
Need help refining the layering, masking/background-clip approach, and achieving a clean editorial-style overlap effect similar to modern portfolio websites.
Expected output:
Current output image is not getting inserted in text partially:
Code:
import profileImage from "../../assets/images/profile-image.png"
export default function HeroSection() {
return (
<div className="relative flex-1 flex flex-col">
<Navbar />
<div className="bg-white pt-6 flex justify-center leading-none">
<div className="inline-flex flex-col items-stretch">
<span className="block ml-33 -mb-8 tracking-tight select-none text-xs font-bold text-zinc-600">
Creative <br />
Developer
</span>
<span className="block ml-95 -mb-10 tracking-tight select-none text-xs font-bold text-zinc-600">
Product <br />
Designer
</span>
<span className="block tracking-tight z-6 select-none font-bold leading-none -mb-[0.17em] -mt-[0.1em] text-[clamp(80px,18vw,200px)] text-center from-[#4a4a4a]
via-[#1f1f1f]
to-[#000000]
bg-clip-text
text-transparent
drop-shadow-[0_4px_12px_rgba(0,0,0,0.25)]
"
style={{ color: 'rgba(25, 30, 24, 0.75)' }}
>
Janice
</span>
<div className="bg-cream overflow-hidden flex justify-end">
<img
src={profileImage}
alt="Janice"
className="object-contain object-bottom block w-[75%] -mt-5 overflow-hidden z-5"
style={{ maxHeight: '50vh' }}
/>
</div>
</div>
</div>
</div>
)
}